【前端】Vue3与Element Plus结合使用的超详细教程：从入门到醒目 ...

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为例：

1. npm init vite@latest my-element-plus-app --template vue
2. cd my-element-plus-app
3. npm install

复制代码

3.2 安装Element Plus

在项目目录下运行以下命令安装Element Plus：

1. npm install element-plus

复制代码

3.3 引入Element Plus

在main.js中引入Element Plus：

1. import { createApp } from 'vue'
2. import App from './App.vue'
3. import ElementPlus from 'element-plus'
4. import 'element-plus/dist/index.css'
6. const app = createApp(App)
7. app.use(ElementPlus)
8. app.mount('#app')

复制代码

四、Element Plus常用组件使用详解

Element Plus提供了丰富的组件，本文将重点介绍几种常用组件的使用方法，包罗按钮（Button）、表单（Form）、表格（Table）和弹窗（Dialog）。
4.1 按钮（Button）

按钮是最底子的交互元素，Element Plus提供了多种按钮类型和状态。
基本使用：

1. <template>
2.   <el-button type="primary">主要按钮</el-button>
3.   <el-button type="success">成功按钮</el-button>
4.   <el-button type="warning">警告按钮</el-button>
5.   <el-button type="danger">危险按钮</el-button>
6.   <el-button type="info">信息按钮</el-button>
7. </template>

复制代码

禁用状态和加载状态：

1. <el-button type="primary" :disabled="isDisabled">禁用按钮</el-button>
2. <el-button type="primary" :loading="loading">加载中</el-button>

复制代码

1. <script setup>
2. import { ref } from 'vue'
4. const isDisabled = ref(false)
5. const loading = ref(true)
6. </script>

复制代码

4.2 表单（Form）

表单是用户输入的主要方式，Element Plus提供了丰富的表单组件和验证机制。
基本表单：

1. <template>
2.   <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
3.     <el-form-item label="用户名" prop="name">
4.       <el-input v-model="form.name"></el-input>
5.     </el-form-item>
6.    
7.     <el-form-item label="密码" prop="password">
8.       <el-input type="password" v-model="form.password"></el-input>
9.     </el-form-item>
10.    
11.     <el-form-item>
12.       <el-button type="primary" @click="submitForm">提交</el-button>
13.       <el-button @click="resetForm">重置</el-button>
14.     </el-form-item>
15.   </el-form>
16. </template>

复制代码

1. <script setup>
2. import { ref } from 'vue'
3. import { ElForm } from 'element-plus'
5. const formRef = ref(null)
6. const form = ref({
7.   name: '',
8.   password: ''
9. })
11. const rules = {
12.   name: [
13.     { required: true, message: '请输入用户名', trigger: 'blur' }
14.   ],
15.   password: [
16.     { required: true, message: '请输入密码', trigger: 'blur' },
17.     { min: 6, message: '密码至少6位', trigger: 'blur' }
18.   ]
19. }
21. const submitForm = () => {
22.   formRef.value.validate((valid) => {
23.     if (valid) {
24.       console.log('提交成功', form.value)
25.     } else {
26.       console.log('验证失败')
27.       return false
28.     }
29.   })
30. }
32. const resetForm = () => {
33.   formRef.value.resetFields()
34. }
35. </script>

复制代码

4.3 表格（Table）

表格用于展示大量数据，Element Plus的Table组件功能强大，支持多种操纵。
基本表格：

1. <template>
2.   <el-table :data="tableData" style="width: 100%">
3.     <el-table-column prop="date" label="日期" width="180"></el-table-column>
4.     <el-table-column prop="name" label="姓名" width="180"></el-table-column>
5.     <el-table-column prop="address" label="地址"></el-table-column>
6.   </el-table>
7. </template>

复制代码

1. <script setup>
2. import { ref } from 'vue'
4. const tableData = ref([
5.   {
6.     date: '2024-04-27',
7.     name: '王小明',
8.     address: '上海市普陀区金沙江路'
9.   },
10.   {
11.     date: '2024-04-26',
12.     name: '李雷',
13.     address: '北京市海淀区西二旗'
14.   },
15.   // 更多数据...
16. ])
17. </script>

复制代码

排序和筛选：

1. <template>
2.   <el-table :data="tableData" style="width: 100%" @sort-change="handleSort">
3.     <el-table-column prop="date" label="日期" width="180" sortable></el-table-column>
4.     <el-table-column prop="name" label="姓名" width="180" sortable></el-table-column>
5.     <el-table-column prop="address" label="地址" sortable></el-table-column>
6.   </el-table>
7. </template>

复制代码

1. <script setup>
2. import { ref } from 'vue'
4. const tableData = ref([
5.   // 数据同上
6. ])
8. const handleSort = (obj) => {
9.   console.log(obj.prop, obj.order)
10. }
11. </script>

复制代码

4.4 弹窗（Dialog）

弹窗用于提示用户或获取用户输入，Element Plus提供了功能丰富的Dialog组件。
基本弹窗：

1. <template>
2.   <el-button type="text" @click="dialogVisible = true">打开弹窗</el-button>
3.   
4.   <el-dialog
5.     title="提示"
6.     :visible.sync="dialogVisible"
7.     width="30%"
8.     @close="handleClose"
9.   >
10.     <span>这是一段内容</span>
11.     <span slot="footer" class="dialog-footer">
12.       <el-button @click="dialogVisible = false">取 消</el-button>
13.       <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
14.     </span>
15.   </el-dialog>
16. </template>

复制代码

1. <script setup>
2. import { ref } from 'vue'
4. const dialogVisible = ref(false)
6. const handleClose = () => {
7.   console.log('弹窗关闭')
8. }
9. </script>

复制代码

五、样式定制

Element Plus提供了多种方式定制样式，以满足不同项目标需求。
5.1 全局主题定制

通过修改Element Plus的全局Sass变量，可以轻松定制主题颜色等样式。
步调：

• 安装Sass依赖：
  

1. npm install -D sass

复制代码

• 创建variables.scss文件，覆盖默认变量：
  

1. // variables.scss
2. $--color-primary: #409EFF;
3. $--color-success: #67C23A;
4. $--color-warning: #E6A23C;
5. $--color-danger: #F56C6C;
6. $--color-info: #909399;

复制代码

• 在main.js中引入自界说变量：
  

1. import 'element-plus/theme-chalk/src/index.scss'
2. import './variables.scss'

复制代码

5.2 按需加载和按需定制

通过按需加载，可以淘汰项目标体积。同时可以使用Babel插件或Vite插件举行自动按需加载。
使用Vite插件：

• 安装插件：
  

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

复制代码

• 设置vite.config.js：
  

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
3. import Components from 'unplugin-vue-components/vite'
4. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
6. export default defineConfig({
7.   plugins: [
8.     vue(),
9.     Components({
10.       resolvers: [ElementPlusResolver()],
11.     }),
12.   ],
13. })

复制代码

5.3 自界说组件样式

可以通过覆盖CSS变量或使用深度选择器自界说单个组件的样式。
示例：自界说按钮颜色

1. <template>
2.   <el-button class="custom-button" type="primary">自定义按钮</el-button>
3. </template>
5. <style scoped>
6. .custom-button {
7.   background-color: #FF5722;
8.   border-color: #FF5722;
9. }
10. </style>

复制代码

六、最佳实践

为了在项目中高效地使用Element Plus，以下是一些最佳实践发起：
6.1 组件按需引入

避免全局引入全部组件，使用按需引入的方式，淘汰项目体积，提高加载速度。
6.2 全局设置

根据项目需求，设置Element Plus的全局属性，如国际化、多语言支持等，提升用户体验。
6.3 主题定制与划一性

通过同一的主题设置，确保项目中全部组件的风格划一，提高团体视觉效果。
6.4 响应式设计

结合Element Plus的栅格系统和响应式组件，确保项目在不同设备上的良好展示效果。
6.5 性能优化

避免不必要的重渲染，合理使用缓存和懒加载技术，提升项目性能。
七、实战案例：构建一个简单的管理背景

为了更好地理解Vue3与Element Plus的结合使用，本文将通过一个简单的管理背景案例，展示如何应用前述知识。
7.1 项目布局

1. my-element-plus-app/
2. ├── public/
3. ├── src/
4. │   ├── components/
5. │   │   ├── Header.vue
6. │   │   ├── Sidebar.vue
7. │   │   └── Content.vue
8. │   ├── views/
9. │   │   ├── Dashboard.vue
10. │   │   ├── Users.vue
11. │   │   └── Settings.vue
12. │   ├── App.vue
13. │   ├── main.js
14. │   └── router.js
15. ├── variables.scss
16. ├── vite.config.js
17. ├── package.json
18. └── ...

复制代码

7.2 创建底子布局

Header.vue

1. <template>
2.   <el-header height="60px" class="header">
3.     <div class="logo">管理后台</div>
4.     <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
5.       <el-menu-item index="1">首页</el-menu-item>
6.       <el-menu-item index="2">用户管理</el-menu-item>
7.       <el-menu-item index="3">设置</el-menu-item>
8.     </el-menu>
9.   </el-header>
10. </template>
12. <script setup>
13. import { ref } from 'vue'
15. const activeIndex = ref('1')
17. const handleSelect = (key) => {
18.   console.log('选中菜单项：', key)
19. }
20. </script>
22. <style scoped>
23. .header {
24.   display: flex;
25.   align-items: center;
26.   justify-content: space-between;
27.   background-color: #ffffff;
28.   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
29. }
31. .logo {
32.   font-size: 20px;
33.   font-weight: bold;
34.   margin-left: 20px;
35. }
36. </style>

复制代码

Sidebar.vue

1. <template>
2.   <el-aside width="200px" class="aside">
3.     <el-menu default-active="1" class="el-menu-vertical-demo">
4.       <el-menu-item index="1">首页</el-menu-item>
5.       <el-menu-item index="2">用户管理</el-menu-item>
6.       <el-menu-item index="3">设置</el-menu-item>
7.     </el-menu>
8.   </el-aside>
9. </template>
11. <script setup></script>
13. <style scoped>
14. .aside {
15.   background-color: #f5f7fa;
16. }
17. </style>

复制代码

Content.vue

1. <template>
2.   <el-main class="main-content">
3.     <router-view></router-view>
4.   </el-main>
5. </template>
7. <script setup></script>
9. <style scoped>
10. .main-content {
11.   padding: 20px;
12.   background-color: #f0f2f5;
13. }
14. </style>

复制代码

App.vue

1. <template>
2.   <el-container style="height: 100vh;">
3.     <Header />
4.     <el-container>
5.       <Sidebar />
6.       <Content />
7.     </el-container>
8.   </el-container>
9. </template>
11. <script setup>
12. import Header from './components/Header.vue'
13. import Sidebar from './components/Sidebar.vue'
14. import Content from './components/Content.vue'
15. </script>
17. <style>
18. body, html, #app {
19.   margin: 0;
20.   padding: 0;
21. }
22. </style>

复制代码

router.js

1. import { createRouter, createWebHistory } from 'vue-router'
2. import Dashboard from './views/Dashboard.vue'
3. import Users from './views/Users.vue'
4. import Settings from './views/Settings.vue'
6. const routes = [
7.   { path: '/', name: 'Dashboard', component: Dashboard },
8.   { path: '/users', name: 'Users', component: Users },
9.   { path: '/settings', name: 'Settings', component: Settings },
10. ]
12. const router = createRouter({
13.   history: createWebHistory(),
14.   routes,
15. })
17. export default router

复制代码

main.js

1. import { createApp } from 'vue'
2. import App from './App.vue'
3. import router from './router'
4. import ElementPlus from 'element-plus'
5. import 'element-plus/dist/index.css'
6. import './variables.scss'
8. const app = createApp(App)
9. app.use(router)
10. app.use(ElementPlus)
11. app.mount('#app')

复制代码

7.3 创建视图组件

Dashboard.vue

1. <template>
2.   <div>
3.     <el-card>
4.       <h2>仪表盘</h2>
5.       <p>欢迎来到管理后台！</p>
6.     </el-card>
7.   </div>
8. </template>
10. <script setup></script>
12. <style scoped>
13. h2 {
14.   margin-bottom: 20px;
15. }
16. </style>

复制代码

Users.vue

1. <template>
2.   <div>
3.     <el-button type="primary" @click="openDialog">新增用户</el-button>
4.     <el-table :data="users" style="width: 100%" stripe>
5.       <el-table-column prop="id" label="ID" width="50"></el-table-column>
6.       <el-table-column prop="name" label="姓名" width="150"></el-table-column>
7.       <el-table-column prop="email" label="邮箱"></el-table-column>
8.       <el-table-column label="操作" width="120">
9.         <template #default="scope">
10.           <el-button type="text" size="small" @click="editUser(scope.row)">编辑</el-button>
11.           <el-button type="text" size="small" @click="deleteUser(scope.row)">删除</el-button>
12.         </template>
13.       </el-table-column>
14.     </el-table>
15.    
16.     <el-dialog :visible.sync="dialogVisible" title="新增用户">
17.       <el-form :model="form" label-width="80px">
18.         <el-form-item label="姓名">
19.           <el-input v-model="form.name"></el-input>
20.         </el-form-item>
21.         <el-form-item label="邮箱">
22.           <el-input v-model="form.email"></el-input>
23.         </el-form-item>
24.       </el-form>
25.       <span slot="footer" class="dialog-footer">
26.         <el-button @click="dialogVisible = false">取 消</el-button>
27.         <el-button type="primary" @click="submitForm">确 定</el-button>
28.       </span>
29.     </el-dialog>
30.   </div>
31. </template>
33. <script setup>
34. import { ref } from 'vue'
36. const users = ref([
37.   { id: 1, name: '张三', email: 'zhangsan@example.com' },
38.   { id: 2, name: '李四', email: 'lisi@example.com' },
39. ])
41. const dialogVisible = ref(false)
42. const form = ref({ name: '', email: '' })
44. const openDialog = () => {
45.   dialogVisible.value = true
46. }
48. const submitForm = () => {
49.   if (form.value.name && form.value.email) {
50.     users.value.push({
51.       id: users.value.length + 1,
52.       name: form.value.name,
53.       email: form.value.email,
54.     })
55.     dialogVisible.value = false
56.     form.value = { name: '', email: '' }
57.   } else {
58.     // 添加表单验证提示
59.   }
60. }
62. const editUser = (user) => {
63.   console.log('编辑用户', user)
64.   // 实现编辑逻辑
65. }
67. const deleteUser = (user) => {
68.   users.value = users.value.filter(u => u.id !== user.id)
69. }
70. </script>
72. <style scoped>
73. .dialog-footer {
74.   text-align: right;
75. }
76. </style>

复制代码

Settings.vue

1. <template>
2.   <div>
3.     <el-card>
4.       <h2>设置</h2>
5.       <el-form :model="settings" label-width="120px">
6.         <el-form-item label="语言">
7.           <el-select v-model="settings.language" placeholder="请选择">
8.             <el-option label="中文" value="zh"></el-option>
9.             <el-option label="英文" value="en"></el-option>
10.           </el-select>
11.         </el-form-item>
12.         <el-form-item label="主题">
13.           <el-select v-model="settings.theme" placeholder="请选择">
14.             <el-option label="默认" value="default"></el-option>
15.             <el-option label="暗色" value="dark"></el-option>
16.           </el-select>
17.         </el-form-item>
18.         <el-form-item>
19.           <el-button type="primary" @click="saveSettings">保存</el-button>
20.         </el-form-item>
21.       </el-form>
22.     </el-card>
23.   </div>
24. </template>
26. <script setup>
27. import { ref } from 'vue'
29. const settings = ref({
30.   language: 'zh',
31.   theme: 'default',
32. })
34. const saveSettings = () => {
35.   console.log('保存设置', settings.value)
36.   // 实现保存逻辑
37. }
38. </script>
40. <style scoped>
41. h2 {
42.   margin-bottom: 20px;
43. }
44. </style>

复制代码

7.4 运行项目

确保全部组件和路由设置正确后，运行以下命令启动项目：

1. npm run dev

复制代码

打开浏览器访问http://localhost:3000，即可看到构建好的管理背景。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。