文章目录
Moss前沿AI一、教程概述1.1 目标读者1.2 学习目标 二、为什么选择Vue3与Element Plus2.1 Vue3的优势2.2 Element Plus的优势2.3 二者结合的优势 三、环境搭建3.1 创建Vue3项目3.2 安装Element Plus3.3 引入Element Plus 四、Element Plus常用组件使用详解4.1 按钮（Button）4.2 表单（Form）4.3 表格（Table）4.4 弹窗（Dialog） 五、样式定制5.1 全局主题定制5.2 按需加载和按需定制5.3 自定义组件样式 六、最佳实践6.1 组件按需引入6.2 全局配置6.3 主题定制与一致性6.4 响应式设计6.5 性能优化 七、实战案例：构建一个简单的管理后台7.1 项目结构7.2 创建基础布局7.3 创建视图组件7.4 运行项目
Moss前沿AI
【OpenAI】获取OpenAI API KEY的两种方式，开发者必看全方面教程！
【VScode】VSCode中的智能AI-GPT编程利器，全面揭秘ChatMoss & ChatGPT中文版
【GPT-o1系列模型！支持Open API调用、自定义助手、文件上传等强大功能，助您提升工作效率！】>>> - CodeMoss & ChatGPT-AI中文版
一、教程概述
1.1 目标读者
本教程适用于具备基本Vue3知识的前端开发者，特别是那些希望通过Element Plus提升项目UI质量和开发效率的开发者。
1.2 学习目标
了解Element Plus与Vue3的基本集成方式掌握常用Element Plus组件的使用方法学会自定义Element Plus的样式以满足项目需求掌握Element Plus在实际项目中的最佳实践二、为什么选择Vue3与Element Plus
2.1 Vue3的优势
Vue3相比于Vue2在性能、体积和功能上都有显著提升。其组合式API（Composition API）使得代码更具可维护性和复用性，适合构建大型复杂的应用。
2.2 Element Plus的优势
Element Plus是基于Vue3的UI组件库，拥有丰富且高质量的组件，支持TypeScript，且社区活跃。其组件设计美观，能够帮助开发者迅速构建优雅的用户界面。
2.3 二者结合的优势
将Vue3与Element Plus结合使用，不仅提升了开发效率，还保证了项目的UI一致性和用户体验。丰富的组件库减少了重复造轮子的时间，使开发者能够专注于业务逻辑的实现。
三、环境搭建
在开始之前，确保您的开发环境已经安装了Node.js和npm（或yarn）。
3.1 创建Vue3项目
使用Vue CLI或Vite创建一个Vue3项目。这里以Vite为例：
npm init vite@latest my-element-plus-app --template vuecd my-element-plus-appnpm install3.2 安装Element Plus
在项目目录下运行以下命令安装Element Plus：
npm install element-plus3.3 引入Element Plus
在main.js中引入Element Plus：
import { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'const app = createApp(App)app.use(ElementPlus)app.mount('#app')四、Element Plus常用组件使用详解
Element Plus提供了丰富的组件，本文将重点介绍几种常用组件的使用方法，包括按钮（Button）、表单（Form）、表格（Table）和弹窗（Dialog）。
4.1 按钮（Button）
按钮是最基础的交互元素，Element Plus提供了多种按钮类型和状态。
基本使用：
<template> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> <el-button type="info">信息按钮</el-button></template>禁用状态和加载状态：
<el-button type="primary" :disabled="isDisabled">禁用按钮</el-button><el-button type="primary" :loading="loading">加载中</el-button><script setup>import { ref } from 'vue'const isDisabled = ref(false)const loading = ref(true)</script>4.2 表单（Form）
表单是用户输入的主要方式，Element Plus提供了丰富的表单组件和验证机制。
基本表单：
<template> <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"> <el-form-item label="用户名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form></template><script setup>import { ref } from 'vue'import { ElForm } from 'element-plus'const formRef = ref(null)const form = ref({ name: '', password: ''})const rules = { name: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, message: '密码至少6位', trigger: 'blur' } ]}const submitForm = () => { formRef.value.validate((valid) => { if (valid) { console.log('提交成功', form.value) } else { console.log('验证失败') return false } })}const resetForm = () => { formRef.value.resetFields()}</script>4.3 表格（Table）
表格用于展示大量数据，Element Plus的Table组件功能强大，支持多种操作。
基本表格：
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table></template><script setup>import { ref } from 'vue'const tableData = ref([ { date: '2024-04-27', name: '王小明', address: '上海市普陀区金沙江路' }, { date: '2024-04-26', name: '李雷', address: '北京市海淀区西二旗' }, // 更多数据...])</script>排序和筛选：
<template> <el-table :data="tableData" style="width: 100%" @sort-change="handleSort"> <el-table-column prop="date" label="日期" width="180" sortable></el-table-column> <el-table-column prop="name" label="姓名" width="180" sortable></el-table-column> <el-table-column prop="address" label="地址" sortable></el-table-column> </el-table></template><script setup>import { ref } from 'vue'const tableData = ref([ // 数据同上])const handleSort = (obj) => { console.log(obj.prop, obj.order)}</script>4.4 弹窗（Dialog）
弹窗用于提示用户或获取用户输入，Element Plus提供了功能丰富的Dialog组件。
基本弹窗：
<template> <el-button type="text" @click="dialogVisible = true">打开弹窗</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="handleClose" > <span>这是一段内容</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog></template><script setup>import { ref } from 'vue'const dialogVisible = ref(false)const handleClose = () => { console.log('弹窗关闭')}</script>五、样式定制
Element Plus提供了多种方式定制样式，以满足不同项目的需求。
5.1 全局主题定制
通过修改Element Plus的全局Sass变量，可以轻松定制主题颜色等样式。
步骤：
安装Sass依赖：npm install -D sassvariables.scss文件，覆盖默认变量： // variables.scss$--color-primary: #409EFF;$--color-success: #67C23A;$--color-warning: #E6A23C;$--color-danger: #F56C6C;$--color-info: #909399;main.js中引入自定义变量： import 'element-plus/theme-chalk/src/index.scss'import './variables.scss'5.2 按需加载和按需定制
通过按需加载，可以减少项目的体积。同时可以使用Babel插件或Vite插件进行自动按需加载。
使用Vite插件：
安装插件：npm install -D unplugin-vue-components unplugin-auto-importvite.config.js： import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({ plugins: [ vue(), Components({ resolvers: [ElementPlusResolver()], }), ],})5.3 自定义组件样式
可以通过覆盖CSS变量或使用深度选择器自定义单个组件的样式。
示例：自定义按钮颜色
<template> <el-button class="custom-button" type="primary">自定义按钮</el-button></template><style scoped>.custom-button { background-color: #FF5722; border-color: #FF5722;}</style>六、最佳实践
为了在项目中高效地使用Element Plus，以下是一些最佳实践建议：
6.1 组件按需引入
避免全局引入所有组件，使用按需引入的方式，减少项目体积，提高加载速度。
6.2 全局配置
根据项目需求，配置Element Plus的全局属性，如国际化、多语言支持等，提升用户体验。
6.3 主题定制与一致性
通过统一的主题配置，确保项目中所有组件的风格一致，提高整体视觉效果。
6.4 响应式设计
结合Element Plus的栅格系统和响应式组件，确保项目在不同设备上的良好展示效果。
6.5 性能优化
避免不必要的重渲染，合理使用缓存和懒加载技术，提升项目性能。
七、实战案例：构建一个简单的管理后台
为了更好地理解Vue3与Element Plus的结合使用，本文将通过一个简单的管理后台案例，展示如何应用前述知识。
7.1 项目结构
my-element-plus-app/├── public/├── src/│ ├── components/│ │ ├── Header.vue│ │ ├── Sidebar.vue│ │ └── Content.vue│ ├── views/│ │ ├── Dashboard.vue│ │ ├── Users.vue│ │ └── Settings.vue│ ├── App.vue│ ├── main.js│ └── router.js├── variables.scss├── vite.config.js├── package.json└── ... 7.2 创建基础布局
Header.vue
<template> <el-header height="60px" class="header"> <div class="logo">管理后台</div> <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">首页</el-menu-item> <el-menu-item index="2">用户管理</el-menu-item> <el-menu-item index="3">设置</el-menu-item> </el-menu> </el-header></template><script setup>import { ref } from 'vue'const activeIndex = ref('1')const handleSelect = (key) => { console.log('选中菜单项：', key)}</script><style scoped>.header { display: flex; align-items: center; justify-content: space-between; background-color: #ffffff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}.logo { font-size: 20px; font-weight: bold; margin-left: 20px;}</style>Sidebar.vue
<template> <el-aside width="200px" class="aside"> <el-menu default-active="1" class="el-menu-vertical-demo"> <el-menu-item index="1">首页</el-menu-item> <el-menu-item index="2">用户管理</el-menu-item> <el-menu-item index="3">设置</el-menu-item> </el-menu> </el-aside></template><script setup></script><style scoped>.aside { background-color: #f5f7fa;}</style>Content.vue
<template> <el-main class="main-content"> <router-view></router-view> </el-main></template><script setup></script><style scoped>.main-content { padding: 20px; background-color: #f0f2f5;}</style>App.vue
<template> <el-container style="height: 100vh;"> <Header /> <el-container> <Sidebar /> <Content /> </el-container> </el-container></template><script setup>import Header from './components/Header.vue'import Sidebar from './components/Sidebar.vue'import Content from './components/Content.vue'</script><style>body, html, #app { margin: 0; padding: 0;}</style>router.js
import { createRouter, createWebHistory } from 'vue-router'import Dashboard from './views/Dashboard.vue'import Users from './views/Users.vue'import Settings from './views/Settings.vue'const routes = [ { path: '/', name: 'Dashboard', component: Dashboard }, { path: '/users', name: 'Users', component: Users }, { path: '/settings', name: 'Settings', component: Settings },]const router = createRouter({ history: createWebHistory(), routes,})export default routermain.js
import { createApp } from 'vue'import App from './App.vue'import router from './router'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import './variables.scss'const app = createApp(App)app.use(router)app.use(ElementPlus)app.mount('#app')7.3 创建视图组件
Dashboard.vue
<template> <div> <el-card> <h2>仪表盘</h2> <p>欢迎来到管理后台！</p> </el-card> </div></template><script setup></script><style scoped>h2 { margin-bottom: 20px;}</style>Users.vue
<template> <div> <el-button type="primary" @click="openDialog">新增用户</el-button> <el-table :data="users" style="width: 100%" stripe> <el-table-column prop="id" label="ID" width="50"></el-table-column> <el-table-column prop="name" label="姓名" width="150"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> <el-table-column label="操作" width="120"> <template #default="scope"> <el-button type="text" size="small" @click="editUser(scope.row)">编辑</el-button> <el-button type="text" size="small" @click="deleteUser(scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible" title="新增用户"> <el-form :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="form.email"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="submitForm">确 定</el-button> </span> </el-dialog> </div></template><script setup>import { ref } from 'vue'const users = ref([ { id: 1, name: '张三', email: 'zhangsan@example.com' }, { id: 2, name: '李四', email: 'lisi@example.com' },])const dialogVisible = ref(false)const form = ref({ name: '', email: '' })const openDialog = () => { dialogVisible.value = true}const submitForm = () => { if (form.value.name && form.value.email) { users.value.push({ id: users.value.length + 1, name: form.value.name, email: form.value.email, }) dialogVisible.value = false form.value = { name: '', email: '' } } else { // 添加表单验证提示 }}const editUser = (user) => { console.log('编辑用户', user) // 实现编辑逻辑}const deleteUser = (user) => { users.value = users.value.filter(u => u.id !== user.id)}</script><style scoped>.dialog-footer { text-align: right;}</style>Settings.vue
<template> <div> <el-card> <h2>设置</h2> <el-form :model="settings" label-width="120px"> <el-form-item label="语言"> <el-select v-model="settings.language" placeholder="请选择"> <el-option label="中文" value="zh"></el-option> <el-option label="英文" value="en"></el-option> </el-select> </el-form-item> <el-form-item label="主题"> <el-select v-model="settings.theme" placeholder="请选择"> <el-option label="默认" value="default"></el-option> <el-option label="暗色" value="dark"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="saveSettings">保存</el-button> </el-form-item> </el-form> </el-card> </div></template><script setup>import { ref } from 'vue'const settings = ref({ language: 'zh', theme: 'default',})const saveSettings = () => { console.log('保存设置', settings.value) // 实现保存逻辑}</script><style scoped>h2 { margin-bottom: 20px;}</style>7.4 运行项目
确保所有组件和路由配置正确后，运行以下命令启动项目：
npm run dev打开浏览器访问http://localhost:3000，即可看到构建好的管理后台。