【前端】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为例：

npm init vite@latest my-element-plus-app --template vue
cd my-element-plus-app
npm install

3.2 安装Element Plus

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

npm install element-plus

3.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-dialogtitle="提示":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变量，可以轻松定制主题颜色等样式。

步骤：

1. 安装Sass依赖：

npm install -D sass

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

// variables.scss
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

3. 在main.js中引入自定义变量：

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

5.2 按需加载和按需定制

通过按需加载，可以减少项目的体积。同时可以使用Babel插件或Vite插件进行自动按需加载。

使用Vite插件：

1. 安装插件：

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

2. 配置vite.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 router

main.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: '[e-mail]' },{ id: 2, name: '李四', email: '[e-mail]' },
])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 = falseform.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，即可看到构建好的管理后台。