第 21 章:组件库

学习目标

• 选型主流组件库
• 按需引入 Element Plus
• 按需引入 Naive UI / Ant Design Vue
• 避坑:全量引入的体积问题

一、主流组件库对比

库	Vue	风格	体积
Element Plus	3	中后台	中
Naive UI	3	现代	小
Ant Design Vue	3	中后台	中
Vant	3	移动端	小
PrimeVue	3	全场景	中

二、Element Plus 按需引入

npm i element-plus

// src/main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')

⚠️ 坑 1:全量引入会把项目打包到 1MB+,中后台推荐按需。

自动按需:

npm i -D unplugin-vue-components

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

<el-button>不需要 import,自动注册</el-button>

三、Naive UI

npm i -D naive-ui

import { create, NButton, NMessageProvider } from 'naive-ui'

const naive = create({ components: [NButton, NMessageProvider] })
app.use(naive)

更推荐自动导入:

import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

⚠️ 坑 2:Naive UI 默认用 CSS-in-JS,可自定义主题,但 SSR 配置麻烦。

四、Ant Design Vue

npm i ant-design-vue

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
app.use(Antd)

五、自定义主题

Element Plus 改主题色:

import { defineConfig } from '@element-plus/vite-plugin'

export default defineConfig({
  theme: {
    primaryColor: '#42b883',
  },
})

Naive UI 主题覆盖:

<n-config-provider :theme-overrides="overrides">
  <App />
</n-config-provider>

<script setup lang="ts">
const overrides = {
  common: { primaryColor: '#42b883' },
}
</script>

六、消息组件全局

// src/utils/message.ts
import { ElMessage } from 'element-plus'

export const message = ElMessage

<script setup lang="ts">
import { message } from '@/utils/message'
message.success('保存成功')
</script>

⚠️ 坑 3:ElMessage 必须在 app.use(ElementPlus) 之后调用,否则会报错。

七、SSR 兼容

Naive UI 适合 SSR(Element Plus 在 SSR 报错较多,需要手动配置)。

八、本章小结

库	选型建议
Element Plus	中后台首选,生态最全
Naive UI	现代风格,主题定制强
Ant Design Vue	重度中后台
Vant	移动端 H5

动手练习

1. Element Plus:按需引入 + 改主题色
2. Naive UI:用 <n-config-provider> 切换主题
3. message 封装:统一封装 message.success / error

---

下一章:第 22 章:请求封装 →