🎉 Element Plus 上手入门教程（基于 Vue 3）——从安装到实战，附最佳实践
“Element Plus 是 Element UI 的 Vue 3 版本，专为现代中后台系统打造。”
参考：【antd-mobile】React + antd-mobile 上手开发教程（2025 最新版）
📜 一、Element Plus 简介
Element Plus 是 饿了么 团队开源的一套 Vue 3 组件库，适用于开发 PC 端的中后台管理系统。它提供了丰富的组件、良好的文档和对 TypeScript 的原生支持。
✅ 主要特性：
| 特性 | 描述 |
|---|---|
| 🧩 丰富组件 | 包括表单、表格、弹窗、导航、布局等常用 UI 组件 |
| 🌞 暗黑模式 | 支持 dark mode |
| 🧊 开箱即用 | 支持自动导入（unplugin-vue-components） |
| 🔤 中英文支持 | 官方支持 i18n 多语言切换 |
| 🛠️ TypeScript 友好 | 原生支持类型推导 |
🛠️ 二、安装 Element Plus
1. 创建 Vue 3 项目（Vite + Vue 3 示例）
npm create vite@latest my-element-app --template vue-ts
cd my-element-app
npm install
2. 安装 Element Plus
npm install element-plus --save
🧩 三、配置 Element Plus
方式一：全局引入（推荐新手使用）
修改 main.js 或 main.ts
// src/main.ts
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')
方式二：按需导入（推荐进阶使用）
安装插件（unplugin-vue-components）
npm install -D unplugin-vue-components
配置 vite.config.js
// 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()],
}),
],
})
✅ 效果：你只需在 .vue 文件中直接使用组件标签，无需手动 import 和 app.use()。
🏗️ 四、实际业务场景最佳实践
场景一：登录页（表单验证 + 弹窗提示）
1. 使用 el-form 实现登录表单
<template>
<el-form :model="form" :rules="rules" label-width="120px" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" show-password />
</el-form-item>
<el-form-item>
<el-button @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const form = ref({
username: '',
password: ''
})
const rules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 15, message: '长度在3到15个字符之间', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码至少6位', trigger: 'blur' }
]
}
const formRef = ref()
const onSubmit = () => {
formRef.value.validate((valid) => {
if (valid) {
// 模拟登录请求
ElMessageBox.confirm('确定提交吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
ElMessage.success('提交成功！')
}).catch(() => {
ElMessage.info('已取消')
})
} else {
console.log('验证失败')
return false
}
})
}
</script>
场景二：数据展示页（表格 + 分页）
使用 el-table 展示用户列表
<template>
<div>
<el-table :data="users" style="width: 100%">
<el-table-column prop="id" label="ID" width="80"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" @click="editUser(scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
layout="prev, pager, next"
:total="100"
@current-change="handlePageChange"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
const users = ref([
{ id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员' },
{ id: 2, name: '李四', email: 'lisi@example.com', role: '普通用户' },
])
const editUser = (user) => {
alert(`编辑用户：${user.name}`)
}
const deleteUser = (user) => {
alert(`删除用户：${user.name}`)
}
const handlePageChange = (pageNum) => {
console.log('当前页码：', pageNum)
}
</script>
场景三：顶部导航栏 + 左侧菜单（Layout + Menu）
使用 el-container, el-header, el-aside, el-menu 构建布局
<template>
<el-container style="height: 100vh">
<el-aside width="200px">
<el-menu default-active="1" class="el-menu-vertical-demo">
<el-menu-item index="1"><span>首页</span></el-menu-item>
<el-menu-item index="2"><span>用户管理</span></el-menu-item>
<el-menu-item index="3"><span>权限管理</span></el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header style="background-color: #409EFF; color: white">
后台管理系统
</el-header>
<el-main>
<router-view /> <!-- 路由内容区域 -->
</el-main>
</el-container>
</el-container>
</template>
🧪 五、常见面试题汇总（含答案）
Q1：如何实现 Element Plus 的按需加载？
✅ 答：通过 unplugin-vue-components 插件 + ElementPlusResolver 自动导入组件，无需手动引入。
Q2：Element Plus 如何支持暗黑主题？
✅ 答：使用官方提供的 dark 模式，或通过 CSS 变量自定义主题。
npm install sass -D
然后在 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({
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/element-plus.scss" as *;`
}
}
},
plugins: [
vue(),
Components({
resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
}),
],
})
Q3：如何实现 Element Plus 表单验证？
✅ 答：使用 el-form 的 validate 方法进行表单校验。
formRef.value.validate((valid) => {
if (valid) {
// 提交逻辑
} else {
return false
}
})
Q4：如何国际化 Element Plus 组件？
✅ 答：结合 dayjs 和 i18n 插件设置语言包。
npm install dayjs vue-i18n
// main.ts
import { createI18n } from 'vue-i18n'
import zh from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
const messages = {
zh,
en
}
const i18n = createI18n({
legacy: false,
locale: 'zh',
fallbackLocale: 'zh',
messages
})
const app = createApp(App)
app.use(i18n)
app.use(ElementPlus, { i18n: i18n.global })
🧾 六、总结：Element Plus 的核心优势
| 优势 | 描述 |
|---|---|
| 🧱 组件丰富 | 几乎涵盖所有中后台所需组件 |
| 🧊 支持暗黑模式 | 更加现代化的视觉体验 |
| 📦 按需加载 | 不影响性能，减少打包体积 |
| 🌐 国际化支持 | 多语言轻松切换 |
| 🛠️ TypeScript 支持 | 类型安全，提高开发效率 |
扫一扫
4026
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
