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