UI 与插件

这一课你将能做到

1. 集成 Element Plus 组件库
2. 在 Vue 项目中使用 Tailwind CSS
3. 安装和使用常用 Vue 插件
4. 编写自定义指令

为什么要学

重复造轮子是最低效的开发方式。Element Plus 提供现成的表格、表单、弹窗，Tailwind CSS 提供原子化样式工具，插件扩展 Vue 能力。站在巨人肩膀上，才能快速交付。

人话：UI 库和插件就像「预制菜」。你不用自己种菜（写组件）、不用自己调料（写样式），加热一下就能上桌（直接使用），味道还不错（设计规范）。

先建立图像

<script setup>
import { ref } from 'vue'
const visible = ref(false)
</script>

<template>
  <el-button type="primary" @click="visible = true">打开弹窗</el-button>
  <el-dialog v-model="visible" title="提示">
    <p>这是 Element Plus 的弹窗</p>
  </el-dialog>
</template>

一行代码得到一个带遮罩、动画、键盘交互的完整弹窗。

跟着做

步骤 1：安装 Element Plus

npm install element-plus

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)
app.use(ElementPlus, { locale: zhCn })
app.mount('#app')

步骤 2：使用 Element Plus 组件

<script setup>
import { ref } from 'vue'
const tableData = ref([
  { name: '张三', age: 25 },
  { name: '李四', age: 30 }
])
</script>

<template>
  <el-table :data="tableData" border>
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="age" label="年龄" />
  </el-table>

  <el-form inline>
    <el-form-item label="搜索">
      <el-input placeholder="关键词" />
    </el-form-item>
    <el-button type="primary">查询</el-button>
  </el-form>
</template>

步骤 3：按需引入（减小体积）

npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

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

配置后无需手动 import 组件和样式，自动按需加载。

步骤 4：集成 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  theme: { extend: {} },
  plugins: []
}

/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

<template>
  <div class="flex items-center justify-between p-4 bg-white rounded-lg shadow">
    <h2 class="text-lg font-bold text-gray-800">标题</h2>
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      按钮
    </button>
  </div>
</template>

步骤 5：常用插件

# 通知提示
npm install @vueuse/core

# 日期处理
npm install dayjs

# 工具库
npm install lodash-es

<script setup>
import { useLocalStorage, useMouse } from '@vueuse/core'
const stored = useLocalStorage('key', '默认值')
const { x, y } = useMouse()
</script>

步骤 6：自定义指令

// directives/focus.js
export default {
  mounted(el) {
    el.focus()
  }
}

// main.js
import focus from './directives/focus'
app.directive('focus', focus)

<template>
  <input v-focus placeholder="自动聚焦">
</template>

讲清楚要点

1. UI 库提升效率：Element Plus 提供 60+ 组件，覆盖中后台大部分场景。
2. 按需引入是必须的：全量引入打包体积大，按需引入只打包用到的组件。
3. Tailwind 是原子化 CSS：不写自定义 CSS，用工具类组合样式，保持一致性。
4. VueUse 是组合式 API 工具库：提供 useLocalStorage、useFetch 等 200+ 实用函数。
5. 自定义指令操作 DOM：v-focus、v-loading 等，适合复用 DOM 操作逻辑。

你可能会懵的地方

• Element Plus 和 Ant Design Vue 怎么选？ 都是优秀的中后台组件库，Element Plus 更轻量，Ant Design Vue 设计更严谨。团队统一即可。

• Tailwind 和 Element Plus 冲突吗？ 不冲突，可以混用。Tailwind 负责布局和自定义样式，Element Plus 负责复杂组件。

• 自定义指令和组件怎么选？ 操作 DOM 行为（聚焦、拖拽）用指令；有独立 UI 结构用组件。

• 插件和组件库的区别？ 插件扩展 Vue 能力（如 Vue Router、Pinia）；组件库提供 UI 组件（如 Element Plus）。

• VueUse 和 lodash 怎么选？ VueUse 是 Vue 专用组合式函数；lodash 是通用工具库。两者可以共存。

错法对照

错法	问题	正解
全量引入 Element Plus	打包体积增加 1MB+	配置 unplugin 按需引入
在 Tailwind 项目里写大量自定义 CSS	违背原子化理念	优先用工具类，必要时用 @apply
自定义指令忘记解绑事件	内存泄漏	在 unmounted 里清理
混用多个 UI 库	样式冲突、体积膨胀	一个项目只用一个主 UI 库
忽略移动端适配	桌面组件在手机上难用	选择支持响应式的组件或自行处理

卡点急救

1. Element Plus 组件不显示：检查是否引入样式文件 element-plus/dist/index.css。
2. Tailwind 类名不生效：检查 content 配置是否包含当前文件，重启 dev server。
3. 自定义指令不触发：确认指令名注册和使用一致（v-focus 对应 app.directive('focus')）。

面试常问

• Element Plus 按需引入的原理？ 构建工具（unplugin）在编译时分析模板中使用的组件，自动引入对应组件和样式。

• Tailwind CSS 的优势和劣势？ 优势：样式一致、开发快、无命名负担；劣势：类名冗长、需要记忆、复杂动画仍需自定义 CSS。

• 自定义指令的生命周期？ created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。

自测三问

1. Element Plus 全量引入和按需引入的体积差异？
2. Tailwind CSS 的 content 配置作用是什么？
3. 什么场景下应该写自定义指令而不是组件？

小结一句话

UI 库和插件是开发效率的倍增器，Element Plus 解决中后台组件，Tailwind 解决样式编写，VueUse 解决常见逻辑，自定义指令解决 DOM 复用，合理选型让开发事半功倍。

延伸

• Element Plus 官方文档
• Tailwind CSS 官方文档
• 下一课：SSR 与测试——Nuxt 简介、Vitest、E2E 测试。