从入门到精通Vue3与Element UI的集成方法与最佳实践

引言

Vue.js是一款流行的JavaScript前端框架，以其简洁的API、灵活的组件系统和卓越的性能而广受开发者喜爱。2020年，Vue团队发布了Vue3，带来了Composition API、更好的TypeScript支持、性能优化等一系列新特性，进一步提升了开发体验和应用性能。

Element UI是一套基于Vue2的桌面端组件库，提供了丰富的UI组件，帮助开发者快速构建美观、一致的Web界面。随着Vue3的发布，Element团队也推出了适配Vue3的版本——Element Plus，它继承了Element UI的设计理念，同时针对Vue3进行了全面优化。

将Vue3与Element Plus（下文简称Element UI）集成，可以充分发挥两者的优势，快速开发现代化的Web应用。本文将从零开始，详细介绍Vue3与Element UI的集成方法，并分享一些最佳实践，帮助读者从入门到精通这一技术组合。

环境准备

在开始之前，我们需要确保开发环境已经准备就绪。

安装Node.js和npm

Vue3和Element UI都需要Node.js环境。请确保已安装Node.js（建议版本14.0或更高）和npm（Node包管理器）。可以通过以下命令检查是否已安装：

node -v npm -v

如果未安装，请访问Node.js官网下载并安装最新的LTS版本。

安装Vue CLI或Vite

Vue CLI是Vue的官方脚手架工具，而Vite是新一代的前端构建工具，两者都可以用来创建Vue3项目。这里我们推荐使用Vite，因为它提供了更快的开发服务器启动和热更新速度。

安装Vite：

npm install -g create-vite

或者使用yarn：

yarn global add create-vite

创建Vue3项目

使用Vite创建一个新的Vue3项目：

create-vite my-vue3-element-app --template vue

或者使用npm：

npm create vite@latest my-vue3-element-app -- --template vue

进入项目目录并安装依赖：

cd my-vue3-element-app npm install

启动开发服务器：

npm run dev

现在，你已经成功创建了一个Vue3项目。在浏览器中访问提示的URL（通常是http://localhost:5173），你将看到Vue的欢迎页面。

集成Element UI

安装Element Plus

Element Plus是Element UI的Vue3版本，我们需要在项目中安装它：

npm install element-plus

全局引入Element Plus

在Vue3项目中，有几种方式可以引入Element Plus。最简单的方式是全局引入，这样可以在任何组件中直接使用Element Plus的组件。

修改src/main.js文件：

import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) // 注册所有图标 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(ElementPlus) app.mount('#app')

按需引入Element Plus

全局引入会打包所有Element Plus的组件，导致最终打包体积较大。对于生产环境，推荐按需引入，只打包实际使用的组件。

首先，安装unplugin-vue-components和unplugin-auto-import：

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

然后，修改vite.config.js文件：

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], })

这样配置后，你可以在组件中直接使用Element Plus的组件，无需手动导入，插件会自动处理组件的导入和注册。

基础组件使用

现在，我们可以在Vue3组件中使用Element Plus的组件了。下面介绍一些常用组件的使用方法。

布局组件

Element Plus提供了el-container、el-header、el-aside、el-main和el-footer等布局组件，帮助快速构建页面布局。

<template> <el-container class="layout-container"> <el-aside width="200px">侧边栏</el-aside> <el-container> <el-header>顶部导航</el-header> <el-main> <h2>主要内容区域</h2> <!-- 这里可以放置其他内容 --> </el-main> <el-footer>底部信息</el-footer> </el-container> </el-container> </template> <script setup> // 使用setup语法糖，无需导出任何内容 </script> <style scoped> .layout-container { height: 100vh; } .el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { background-color: #d3dce6; color: #333; } .el-main { background-color: #e9eef3; color: #333; } .el-footer { background-color: #b3c0d1; color: #333; line-height: 60px; } </style>

表单组件

表单是Web应用中常见的交互元素，Element Plus提供了丰富的表单组件。

<template> <div class="form-container"> <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" status-icon > <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" placeholder="请输入用户名" /> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password /> </el-form-item> <el-form-item label="确认密码" prop="confirmPassword"> <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" show-password /> </el-form-item> <el-form-item label="性别" prop="gender"> <el-radio-group v-model="form.gender"> <el-radio label="male">男</el-radio> <el-radio label="female">女</el-radio> </el-radio-group> </el-form-item> <el-form-item label="爱好" prop="hobbies"> <el-checkbox-group v-model="form.hobbies"> <el-checkbox label="reading">阅读</el-checkbox> <el-checkbox label="music">音乐</el-checkbox> <el-checkbox label="sports">运动</el-checkbox> <el-checkbox label="travel">旅行</el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="城市" prop="city"> <el-select v-model="form.city" placeholder="请选择城市"> <el-option label="北京" value="beijing" /> <el-option label="上海" value="shanghai" /> <el-option label="广州" value="guangzhou" /> <el-option label="深圳" value="shenzhen" /> </el-select> </el-form-item> <el-form-item label="生日" prop="birthday"> <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" /> </el-form-item> <el-form-item label="个人简介" prop="introduction"> <el-input v-model="form.introduction" type="textarea" :rows="4" placeholder="请输入个人简介" /> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(formRef)">提交</el-button> <el-button @click="resetForm(formRef)">重置</el-button> </el-form-item> </el-form> </div> </template> <script setup> import { reactive, ref } from 'vue' const formRef = ref() const form = reactive({ username: '', password: '', confirmPassword: '', gender: '', hobbies: [], city: '', birthday: '', introduction: '' }) // 自定义验证规则 - 确认密码 const validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')) } else if (value !== form.password) { callback(new Error('两次输入密码不一致!')) } else { callback() } } const rules = reactive({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度应为 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度应为 6 到 20 个字符', trigger: 'blur' } ], confirmPassword: [ { required: true, message: '请再次输入密码', trigger: 'blur' }, { validator: validatePass2, trigger: 'blur' } ], gender: [ { required: true, message: '请选择性别', trigger: 'change' } ], city: [ { required: true, message: '请选择城市', trigger: 'change' } ], birthday: [ { type: 'date', required: true, message: '请选择生日', trigger: 'change' } ] }) const submitForm = (formEl) => { if (!formEl) return formEl.validate((valid, fields) => { if (valid) { console.log('提交成功!', form) ElMessage.success('提交成功!') // 这里可以添加API调用 } else { console.log('验证失败!', fields) ElMessage.error('请正确填写表单!') return false } }) } const resetForm = (formEl) => { if (!formEl) return formEl.resetFields() } </script> <style scoped> .form-container { max-width: 600px; margin: 20px auto; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } </style>

表格组件

表格是展示数据的重要组件，Element Plus的el-table组件功能强大，支持排序、筛选、分页等功能。

<template> <div class="table-container"> <div class="table-operations"> <el-button type="primary" @click="handleAdd">新增</el-button> <el-button type="danger" @click="handleBatchDelete" :disabled="!selectedRows.length"> 批量删除 </el-button> <el-input v-model="searchQuery" placeholder="搜索用户名或邮箱" class="search-input" clearable @input="handleSearch" > <template #prefix> <el-icon><Search /></el-icon> </template> </el-input> </div> <el-table :data="filteredTableData" border style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" /> <el-table-column prop="id" label="ID" width="80" sortable /> <el-table-column prop="username" label="用户名" sortable /> <el-table-column prop="email" label="邮箱" /> <el-table-column prop="role" label="角色" /> <el-table-column prop="status" label="状态"> <template #default="scope"> <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'"> {{ scope.row.status === 'active' ? '活跃' : '禁用' }} </el-tag> </template> </el-table-column> <el-table-column prop="createTime" label="创建时间" sortable /> <el-table-column label="操作" width="180"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(scope.row)" >删除</el-button> </template> </el-table-column> </el-table> <div class="pagination-container"> <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </div> </template> <script setup> import { ref, computed, onMounted } from 'vue' import { Search } from '@element-plus/icons-vue' import { ElMessage, ElMessageBox } from 'element-plus' // 表格数据 const tableData = ref([ { id: 1, username: 'admin', email: 'admin@example.com', role: '管理员', status: 'active', createTime: '2023-01-01' }, { id: 2, username: 'user1', email: 'user1@example.com', role: '普通用户', status: 'active', createTime: '2023-01-02' }, { id: 3, username: 'user2', email: 'user2@example.com', role: '普通用户', status: 'inactive', createTime: '2023-01-03' }, { id: 4, username: 'user3', email: 'user3@example.com', role: '编辑', status: 'active', createTime: '2023-01-04' }, { id: 5, username: 'user4', email: 'user4@example.com', role: '普通用户', status: 'active', createTime: '2023-01-05' }, { id: 6, username: 'user5', email: 'user5@example.com', role: '编辑', status: 'inactive', createTime: '2023-01-06' }, { id: 7, username: 'user6', email: 'user6@example.com', role: '普通用户', status: 'active', createTime: '2023-01-07' }, { id: 8, username: 'user7', email: 'user7@example.com', role: '普通用户', status: 'active', createTime: '2023-01-08' }, { id: 9, username: 'user8', email: 'user8@example.com', role: '编辑', status: 'inactive', createTime: '2023-01-09' }, { id: 10, username: 'user9', email: 'user9@example.com', role: '普通用户', status: 'active', createTime: '2023-01-10' }, { id: 11, username: 'user10', email: 'user10@example.com', role: '普通用户', status: 'active', createTime: '2023-01-11' }, { id: 12, username: 'user11', email: 'user11@example.com', role: '编辑', status: 'inactive', createTime: '2023-01-12' } ]) // 搜索查询 const searchQuery = ref('') // 分页相关 const currentPage = ref(1) const pageSize = ref(10) const total = computed(() => tableData.value.length) // 选中的行 const selectedRows = ref([]) // 过滤后的表格数据（搜索功能） const filteredTableData = computed(() => { let result = [...tableData.value] // 应用搜索过滤 if (searchQuery.value) { const query = searchQuery.value.toLowerCase() result = result.filter(item => item.username.toLowerCase().includes(query) || item.email.toLowerCase().includes(query) ) } // 应用分页 const start = (currentPage.value - 1) * pageSize.value const end = start + pageSize.value return result.slice(start, end) }) // 处理选择变化 const handleSelectionChange = (val) => { selectedRows.value = val } // 处理搜索 const handleSearch = () => { currentPage.value = 1 // 重置到第一页 } // 处理分页大小变化 const handleSizeChange = (val) => { pageSize.value = val currentPage.value = 1 } // 处理当前页变化 const handleCurrentChange = (val) => { currentPage.value = val } // 处理新增 const handleAdd = () => { ElMessage.success('点击了新增按钮') // 这里可以打开新增对话框或跳转到新增页面 } // 处理编辑 const handleEdit = (row) => { ElMessage.info(`编辑用户: ${row.username}`) // 这里可以打开编辑对话框或跳转到编辑页面 } // 处理删除 const handleDelete = (row) => { ElMessageBox.confirm( `确定要删除用户 ${row.username} 吗?`, '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', } ) .then(() => { // 实际项目中，这里应该调用API删除数据 const index = tableData.value.findIndex(item => item.id === row.id) if (index !== -1) { tableData.value.splice(index, 1) ElMessage.success('删除成功') } }) .catch(() => { ElMessage.info('已取消删除') }) } // 处理批量删除 const handleBatchDelete = () => { if (selectedRows.value.length === 0) { ElMessage.warning('请先选择要删除的行') return } ElMessageBox.confirm( `确定要删除选中的 ${selectedRows.value.length} 个用户吗?`, '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', } ) .then(() => { // 实际项目中，这里应该调用API批量删除数据 const ids = selectedRows.value.map(row => row.id) tableData.value = tableData.value.filter(item => !ids.includes(item.id)) ElMessage.success('批量删除成功') selectedRows.value = [] // 清空选择 }) .catch(() => { ElMessage.info('已取消批量删除') }) } // 模拟从API获取数据 onMounted(() => { // 实际项目中，这里应该调用API获取数据 console.log('组件已挂载，可以在这里获取数据') }) </script> <style scoped> .table-container { padding: 20px; } .table-operations { margin-bottom: 20px; display: flex; align-items: center; } .search-input { width: 250px; margin-left: auto; } .pagination-container { margin-top: 20px; display: flex; justify-content: center; } </style>

对话框组件

对话框是常用的交互组件，用于展示信息或收集用户输入。

<template> <div class="dialog-container"> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog v-model="dialogVisible" title="用户信息" width="500px" :before-close="handleClose" > <el-form :model="form" label-width="100px"> <el-form-item label="用户名"> <el-input v-model="form.username" placeholder="请输入用户名" /> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="form.email" placeholder="请输入邮箱" /> </el-form-item> <el-form-item label="角色"> <el-select v-model="form.role" placeholder="请选择角色"> <el-option label="管理员" value="admin" /> <el-option label="编辑" value="editor" /> <el-option label="普通用户" value="user" /> </el-select> </el-form-item> <el-form-item label="状态"> <el-switch v-model="form.status" active-text="启用" inactive-text="禁用" /> </el-form-item> <el-form-item label="备注"> <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注信息" /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleSubmit">确定</el-button> </span> </template> </el-dialog> </div> </template> <script setup> import { ref, reactive } from 'vue' import { ElMessage } from 'element-plus' const dialogVisible = ref(false) const form = reactive({ username: '', email: '', role: '', status: true, remark: '' }) const handleClose = (done) => { ElMessageBox.confirm('确定要关闭对话框吗？未保存的内容将会丢失。') .then(() => { done() }) .catch(() => { // 取消关闭 }) } const handleSubmit = () => { if (!form.username || !form.email || !form.role) { ElMessage.warning('请填写必填项') return } // 这里可以添加表单验证和API调用 console.log('提交的表单数据:', form) ElMessage.success('提交成功') dialogVisible.value = false } </script> <style scoped> .dialog-container { padding: 20px; } </style>

自定义主题

Element Plus提供了丰富的自定义主题选项，可以根据项目需求调整组件的样式。

使用SCSS变量覆盖

Element Plus使用SCSS变量定义样式，我们可以通过覆盖这些变量来自定义主题。

首先，安装SCSS：

npm install -D sass

然后，创建一个样式文件，例如src/styles/element-variables.scss：

/* 覆盖主题色 */ $--color-primary: #409eff; /* 覆盖字体颜色 */ $--color-text-primary: #303133; $--color-text-regular: #606266; $--color-text-secondary: #909399; $--color-text-placeholder: #c0c4cc; /* 覆盖边框颜色 */ $--border-color-base: #dcdfe6; $--border-color-light: #e4e7ed; $--border-color-lighter: #ebeef5; $--border-color-extra-light: #f2f6fc; /* 导入Element Plus的样式文件 */ @forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ( "primary": ( "base": $--color-primary, ), ) ); /* 如果只需要覆盖部分变量，可以使用以下方式 */ @use "element-plus/theme-chalk/src/index.scss" as *; /* 这里可以添加自定义的样式 */ .el-button { border-radius: 4px; &--primary { font-weight: bold; } }

在main.js中引入这个样式文件：

import 'element-plus/dist/index.css' import './styles/element-variables.scss'

使用在线主题编辑器

Element Plus提供了在线主题编辑器，可以通过可视化界面调整主题，并下载自定义的主题样式。

高级集成

按需加载

按需加载可以显著减少打包体积，我们已经在前面介绍了使用unplugin-vue-components和unplugin-auto-import实现自动按需加载的方法。这里再介绍一种手动按需加载的方式。

首先，安装babel-plugin-import：

npm install -D babel-plugin-import

然后，创建或修改babel.config.js：

module.exports = { plugins: [ [ 'import', { libraryName: 'element-plus', customStyleName: (name) => { return `element-plus/theme-chalk/${name}.css` } } ] ] }

在组件中手动导入需要的组件：

<template> <el-button type="primary">按钮</el-button> <el-input v-model="input" placeholder="请输入内容" /> </template> <script setup> import { ref } from 'vue' import { ElButton, ElInput } from 'element-plus' const input = ref('') </script>

国际化

Element Plus支持多语言，默认使用中文。如果需要切换到其他语言，可以使用Element Plus的国际化功能。

首先，安装所需的语言包：

npm install element-plus/lib/locale/lang/en

然后，在main.js中配置：

import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import zhCn from 'element-plus/dist/locale/zh-cn.mjs' // 中文 import en from 'element-plus/dist/locale/en.mjs' // 英文 const app = createApp(App) // 根据实际情况选择语言 app.use(ElementPlus, { locale: zhCn, // 中文 // locale: en, // 英文 }) app.mount('#app')

如果需要动态切换语言，可以使用ElConfigProvider组件：

<template> <el-config-provider :locale="locale"> <div> <el-select v-model="language" @change="handleLanguageChange"> <el-option label="中文" value="zh-cn" /> <el-option label="English" value="en" /> </el-select> <el-button type="primary">{{ $t('el.button.confirm') }}</el-button> <el-date-picker type="date" :placeholder="$t('el.datepicker.placeholder.date')" /> </div> </el-config-provider> </template> <script setup> import { ref } from 'vue' import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import en from 'element-plus/dist/locale/en.mjs' const language = ref('zh-cn') const locale = ref(zhCn) const handleLanguageChange = (value) => { if (value === 'zh-cn') { locale.value = zhCn } else if (value === 'en') { locale.value = en } } </script>

自定义插件

如果需要在Element Plus的基础上扩展功能，可以创建自定义插件。

创建一个插件文件，例如src/plugins/element-plus.js：

import { ElLoading, ElMessage, ElMessageBox, ElNotification } from 'element-plus' // 创建一个Vue插件 export default { install(app) { // 添加全局属性 app.config.globalProperties.$loading = ElLoading.service app.config.globalProperties.$message = ElMessage app.config.globalProperties.$confirm = ElMessageBox.confirm app.config.globalProperties.$notify = ElNotification // 添加全局方法 app.provide('loading', ElLoading.service) app.provide('message', ElMessage) app.provide('confirm', ElMessageBox.confirm) app.provide('notify', ElNotification) // 注册全局组件 // app.component('my-component', MyComponent) } }

在main.js中使用插件：

import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import elementPlusPlugin from './plugins/element-plus' const app = createApp(App) app.use(ElementPlus) app.use(elementPlusPlugin) app.mount('#app')

在组件中使用插件提供的方法：

<template> <div> <el-button @click="showLoading">显示加载</el-button> <el-button @click="showMessage">显示消息</el-button> <el-button @click="showConfirm">显示确认框</el-button> <el-button @click="showNotification">显示通知</el-button> </div> </template> <script setup> import { inject } from 'vue' // 使用注入的方法 const message = inject('message') const confirm = inject('confirm') const notify = inject('notify') const loading = inject('loading') const showLoading = () => { const loadingInstance = loading({ lock: true, text: '加载中...', background: 'rgba(0, 0, 0, 0.7)' }) setTimeout(() => { loadingInstance.close() }, 2000) } const showMessage = () => { message({ message: '这是一条消息提示', type: 'success' }) } const showConfirm = () => { confirm('确定要执行此操作吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) .then(() => { message({ type: 'success', message: '操作成功!' }) }) .catch(() => { message({ type: 'info', message: '已取消操作' }) }) } const showNotification = () => { notify({ title: '提示', message: '这是一条通知消息', type: 'success', duration: 3000 }) } </script>

最佳实践

性能优化

按需加载组件：使用unplugin-vue-components和unplugin-auto-import实现组件的自动按需加载，减少打包体积。
使用虚拟滚动：对于大量数据的列表，使用el-table-v2（虚拟滚动表格）或el-virtual-scroll-list（虚拟滚动列表）提高渲染性能。
懒加载组件：对于非首屏必需的组件，使用动态导入（Dynamic Import）实现懒加载。

// 懒加载组件 const LazyComponent = defineAsyncComponent(() => import('./LazyComponent.vue'))

合理使用v-if和v-show：
- v-if：条件不满足时完全销毁和重建组件，适用于初始渲染时不显示且切换频率低的场景。
- v-show：通过CSS的display属性控制显示隐藏，适用于频繁切换显示状态的场景。
避免不必要的重新渲染：合理使用v-once、computed和watch，避免不必要的计算和重新渲染。

代码组织

组件封装：将常用的功能封装成可复用的组件，提高代码复用性。

<!-- BaseForm.vue --> <template> <el-form :model="formModel" :rules="formRules" ref="formRef" :label-width="labelWidth" :inline="inline" class="base-form" > <slot></slot> <div class="form-actions"> <slot name="actions"> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </slot> </div> </el-form> </template> <script setup> import { ref } from 'vue' const props = defineProps({ model: { type: Object, required: true }, rules: { type: Object, default: () => ({}) }, labelWidth: { type: String, default: '120px' }, inline: { type: Boolean, default: false } }) const emit = defineEmits(['submit', 'reset']) const formRef = ref() const formModel = props.model const formRules = props.rules const submitForm = () => { if (!formRef.value) return formRef.value.validate((valid) => { if (valid) { emit('submit', formModel) } }) } const resetForm = () => { if (!formRef.value) return formRef.value.resetFields() emit('reset') } </script> <style scoped> .base-form { margin-bottom: 20px; } .form-actions { margin-top: 20px; text-align: center; } </style>

使用Composition API组织逻辑：使用Vue3的Composition API将相关逻辑组织在一起，提高代码的可读性和可维护性。

// useTable.js import { ref, reactive, computed, onMounted } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' export function useTable(fetchDataApi) { // 表格数据 const tableData = ref([]) // 加载状态 const loading = ref(false) // 分页相关 const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 }) // 搜索条件 const searchForm = reactive({}) // 选中行 const selectedRows = ref([]) // 获取数据 const fetchData = async () => { loading.value = true try { const params = { page: pagination.currentPage, pageSize: pagination.pageSize, ...searchForm } const res = await fetchDataApi(params) tableData.value = res.data.list pagination.total = res.data.total } catch (error) { console.error('获取数据失败:', error) ElMessage.error('获取数据失败') } finally { loading.value = false } } // 处理搜索 const handleSearch = () => { pagination.currentPage = 1 fetchData() } // 重置搜索 const resetSearch = () => { Object.keys(searchForm).forEach(key => { searchForm[key] = '' }) pagination.currentPage = 1 fetchData() } // 处理分页大小变化 const handleSizeChange = (val) => { pagination.pageSize = val pagination.currentPage = 1 fetchData() } // 处理当前页变化 const handleCurrentChange = (val) => { pagination.currentPage = val fetchData() } // 处理选择变化 const handleSelectionChange = (val) => { selectedRows.value = val } // 处理删除 const handleDelete = async (row) => { try { await ElMessageBox.confirm( `确定要删除这条记录吗?`, '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', } ) // 这里调用删除API // await deleteApi(row.id) ElMessage.success('删除成功') fetchData() } catch (error) { if (error !== 'cancel') { console.error('删除失败:', error) ElMessage.error('删除失败') } } } // 批量删除 const handleBatchDelete = async () => { if (selectedRows.value.length === 0) { ElMessage.warning('请先选择要删除的记录') return } try { await ElMessageBox.confirm( `确定要删除选中的 ${selectedRows.value.length} 条记录吗?`, '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', } ) // 这里调用批量删除API // const ids = selectedRows.value.map(row => row.id) // await batchDeleteApi(ids) ElMessage.success('批量删除成功') fetchData() } catch (error) { if (error !== 'cancel') { console.error('批量删除失败:', error) ElMessage.error('批量删除失败') } } } // 组件挂载时获取数据 onMounted(() => { fetchData() }) return { tableData, loading, pagination, searchForm, selectedRows, fetchData, handleSearch, resetSearch, handleSizeChange, handleCurrentChange, handleSelectionChange, handleDelete, handleBatchDelete } }

在组件中使用这个组合式函数：

<template> <div class="table-container"> <!-- 搜索表单 --> <el-form :model="searchForm" inline> <el-form-item label="用户名"> <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable /> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="searchForm.email" placeholder="请输入邮箱" clearable /> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSearch">搜索</el-button> <el-button @click="resetSearch">重置</el-button> </el-form-item> </el-form> <!-- 操作按钮 --> <div class="table-operations"> <el-button type="primary" @click="handleAdd">新增</el-button> <el-button type="danger" @click="handleBatchDelete" :disabled="!selectedRows.length"> 批量删除 </el-button> </div> <!-- 表格 --> <el-table v-loading="loading" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" /> <el-table-column prop="id" label="ID" width="80" /> <el-table-column prop="username" label="用户名" /> <el-table-column prop="email" label="邮箱" /> <el-table-column prop="role" label="角色" /> <el-table-column label="操作" width="180"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(scope.row)" >删除</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <div class="pagination-container"> <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" :page-sizes="[10, 20, 50, 100]" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </div> </template> <script setup> import { useTable } from '@/composables/useTable' import { getUserList } from '@/api/user' // 使用自定义的useTable组合式函数 const { tableData, loading, pagination, searchForm, selectedRows, fetchData, handleSearch, resetSearch, handleSizeChange, handleCurrentChange, handleSelectionChange, handleDelete, handleBatchDelete } = useTable(getUserList) // 处理新增 const handleAdd = () => { // 实现新增逻辑 } </script> <style scoped> .table-container { padding: 20px; } .table-operations { margin-bottom: 20px; } .pagination-container { margin-top: 20px; display: flex; justify-content: center; } </style>

API请求封装：封装API请求模块，统一管理接口请求。

// src/api/request.js import axios from 'axios' import { ElMessage } from 'element-plus' // 创建axios实例 const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || '/api', timeout: 10000 }) // 请求拦截器 service.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = `Bearer ${token}` } return config }, error => { // 对请求错误做些什么 console.error('请求错误:', error) return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { const res = response.data // 根据自定义错误码处理错误 if (res.code !== 200) { ElMessage.error(res.message || '请求失败') // 处理特定错误码 if (res.code === 401) { // 未授权，跳转到登录页 router.push('/login') } return Promise.reject(new Error(res.message || '请求失败')) } else { return res } }, error => { console.error('响应错误:', error) // 处理HTTP错误状态码 if (error.response) { switch (error.response.status) { case 401: ElMessage.error('未授权，请重新登录') router.push('/login') break case 403: ElMessage.error('拒绝访问') break case 404: ElMessage.error('请求的资源不存在') break case 500: ElMessage.error('服务器内部错误') break default: ElMessage.error(`请求失败: ${error.message}`) } } else { // 请求超时或网络错误 ElMessage.error('网络错误，请检查您的网络连接') } return Promise.reject(error) } ) export default service

然后，为每个模块创建API文件：

// src/api/user.js import request from './request' // 获取用户列表 export function getUserList(params) { return request({ url: '/users', method: 'get', params }) } // 获取用户详情 export function getUserDetail(id) { return request({ url: `/users/${id}`, method: 'get' }) } // 创建用户 export function createUser(data) { return request({ url: '/users', method: 'post', data }) } // 更新用户 export function updateUser(id, data) { return request({ url: `/users/${id}`, method: 'put', data }) } // 删除用户 export function deleteUser(id) { return request({ url: `/users/${id}`, method: 'delete' }) } // 批量删除用户 export function batchDeleteUsers(ids) { return request({ url: '/users/batch', method: 'delete', data: { ids } }) }

状态管理：对于复杂的应用，使用Pinia进行状态管理。

// src/store/user.js import { defineStore } from 'pinia' import { getUserInfo, login, logout } from '@/api/user' export const useUserStore = defineStore('user', { state: () => ({ userInfo: null, token: localStorage.getItem('token') || '', permissions: [] }), getters: { isLoggedIn: (state) => !!state.token, username: (state) => state.userInfo?.username || '', role: (state) => state.userInfo?.role || '' }, actions: { // 设置token setToken(token) { this.token = token localStorage.setItem('token', token) }, // 清除token clearToken() { this.token = '' localStorage.removeItem('token') }, // 设置用户信息 setUserInfo(userInfo) { this.userInfo = userInfo }, // 清除用户信息 clearUserInfo() { this.userInfo = null this.permissions = [] }, // 登录 async login(loginForm) { try { const { data } = await login(loginForm) this.setToken(data.token) await this.fetchUserInfo() return data } catch (error) { this.clearToken() this.clearUserInfo() throw error } }, // 获取用户信息 async fetchUserInfo() { try { const { data } = await getUserInfo() this.setUserInfo(data.userInfo) this.permissions = data.permissions || [] return data } catch (error) { this.clearToken() this.clearUserInfo() throw error } }, // 登出 async logout() { try { await logout() } catch (error) { console.error('登出请求失败:', error) } finally { this.clearToken() this.clearUserInfo() } } } })

代码规范

使用ESLint和Prettier：配置ESLint和Prettier，确保代码风格一致。
组件命名规范：
- 单文件组件文件名使用PascalCase，如UserProfile.vue
- 基础组件以Base开头，如BaseButton.vue
- 只包含一个功能的组件以功能命名，如UserList.vue
- 页面组件放在views目录下，以功能命名，如Dashboard.vue
Props命名规范：
- 在声明prop时，使用camelCase命名
- 在模板中使用时，使用kebab-case命名

<script setup> const props = defineProps({ userName: { type: String, required: true }, userAge: { type: Number, default: 18 } }) </script> <template> <div> <p>用户名: {{ userName }}</p> <p>年龄: {{ userAge }}</p> </div> </template>

事件命名规范：
- 事件名使用kebab-case
- 事件处理函数使用handle + 事件名，如handle-submit

<script setup> const emit = defineEmits(['update:modelValue', 'submit']) const handleSubmit = () => { emit('submit') } </script> <template> <div> <el-button @click="handleSubmit">提交</el-button> </div> </template>

常见问题与解决方案

1. 样式冲突问题

问题描述：Element Plus的样式与项目自定义样式发生冲突，导致UI显示异常。

解决方案：

使用CSS作用域（Scoped CSS）限制样式范围：

<style scoped> /* 这里的样式只作用于当前组件 */ .el-button { background-color: #409eff; } </style>

使用深度选择器（Deep Selector）修改Element Plus组件内部样式：

<style scoped> /* 使用:deep()或::v-deep修改Element Plus组件内部样式 */ :deep(.el-input__inner) { border-radius: 8px; } </style>

自定义主题，覆盖Element Plus的默认变量：

/* 在自定义主题文件中覆盖变量 */ $--color-primary: #409eff; $--font-path: '~element-plus/theme-chalk/fonts'; @import "~element-plus/packages/theme-chalk/src/index";

2. 按需加载不生效

问题描述：配置了按需加载，但所有Element Plus组件仍然被打包。

解决方案：

确保正确安装和配置了unplugin-vue-components和unplugin-auto-import：

// vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], })

如果使用的是Webpack，确保正确配置了babel-plugin-import：

// babel.config.js module.exports = { plugins: [ [ 'import', { libraryName: 'element-plus', customStyleName: (name) => { return `element-plus/theme-chalk/${name}.css` } } ] ] }

检查是否在代码中手动导入了Element Plus：

// 错误：这样会导入所有组件 import ElementPlus from 'element-plus' app.use(ElementPlus) // 正确：按需导入 import { ElButton, ElInput } from 'element-plus' app.use(ElButton) app.use(ElInput)

3. TypeScript类型错误

问题描述：在TypeScript项目中使用Element Plus时，出现类型错误。

解决方案：

安装Element Plus的类型定义文件：

npm install -D @element-plus/icons-vue

在tsconfig.json中配置类型：

{ "compilerOptions": { "types": ["element-plus/global"] } }

在组件中正确使用类型：

<script setup lang="ts"> import { ref } from 'vue' import type { FormInstance, FormRules } from 'element-plus' const formRef = ref<FormInstance>() const form = ref({ username: '', password: '' }) const rules = ref<FormRules>({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] }) const submitForm = async (formEl: FormInstance | undefined) => { if (!formEl) return await formEl.validate((valid, fields) => { if (valid) { console.log('submit!') } else { console.log('error submit!', fields) } }) } </script>

4. 国际化不生效

问题描述：配置了Element Plus的国际化，但组件仍然显示默认语言。

解决方案：

确保正确导入和配置了语言包：

import { createApp } from 'vue' import ElementPlus from 'element-plus' import zhCn from 'element-plus/dist/locale/zh-cn.mjs' const app = createApp(App) app.use(ElementPlus, { locale: zhCn, })

如果需要动态切换语言，使用ElConfigProvider组件：

<template> <el-config-provider :locale="locale"> <App /> </el-config-provider> </template> <script setup> import { ref } from 'vue' import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import en from 'element-plus/dist/locale/en.mjs' const language = ref('zh-cn') const locale = ref(zhCn) // 切换语言 const changeLanguage = (lang) => { language.value = lang locale.value = lang === 'zh-cn' ? zhCn : en } </script>

确保项目中没有其他地方覆盖了Element Plus的语言设置。

5. 自定义主题不生效

问题描述：自定义了Element Plus的主题，但样式没有生效。

解决方案：

确保正确安装了SCSS：

npm install -D sass

检查自定义主题文件的导入顺序：

// main.js import 'element-plus/dist/index.css' // 先导入Element Plus的默认样式 import './styles/element-variables.scss' // 再导入自定义样式

确保自定义主题文件中正确覆盖了变量：

// element-variables.scss $--color-primary: #409eff; @forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ( "primary": ( "base": $--color-primary, ), ) ); // 如果只需要覆盖部分变量，可以使用以下方式 @use "element-plus/theme-chalk/src/index.scss" as *;

如果使用Vite，确保在vite.config.js中正确配置了CSS预处理器：

// vite.config.js export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: `@use "@/styles/element-variables.scss" as *;` } } } })