第四阶段：Vue 进阶与生态整合（第 56 天）(Vue UI 框架整合：Element Plus 的快速上手与使用)

Element Plus 快速入门指南

一、框架定位

Element Plus 是 Vue3 官方推荐的桌面端 UI 框架，提供超过 55 个常用组件，包括：

• 交互类：按钮、表单、表格
• 布局类：布局容器、分割线
• 反馈类：弹窗、通知
• 导航类：菜单、分页

二、安装与配置

npm install element-plus
npm install -D unplugin-vue-components

按需引入配置（Vite）：

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

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

全局引入对比：

// main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

打包体积差异：全局引入约 1MB，按需引入可降至 100KB 以下

三、核心组件实战

1. 表单验证

<template>
<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" />
</el-form-item>
<el-button type="primary" @click="submit">登录</el-button>
</el-form>
</template>

<script setup>
const form = reactive({ username: '', password: '' })
const rules = {
username: [{ required: true, message: '必填项', trigger: 'blur' }],
password: [{ min: 6, message: '至少6位', trigger: 'blur' }]
}
</script>

2. 表格分页

<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年龄" />
</el-table>
<el-pagination
:total="100"
:page-size="10"
@current-change="handlePageChange"
/>
</template>

<script setup>
const tableData = ref([{ name: '张三', age: 30 }])
const handlePageChange = (page) => {
console.log(`加载第 ${page} 页数据`)
}
</script>

3. 模态框交互

<el-button @click="dialogVisible = true">打开弹窗</el-button>
<el-dialog v-model="dialogVisible" title="提示">
<span>确认操作？</span>
</el-dialog>

四、优化实践

// 安装图标库
npm install @element-plus/icons-vue

// 按需引入图标
import { User, Lock } from '@element-plus/icons-vue'

// styles/element-variables.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$primary: #42b983
);

五、总结要点

完整文档参考：Element Plus 官方文档