Vue3 中使用 Element Plus 完整指南
一、Element Plus 简介
Element Plus 是一套基于 Vue 3.0 的桌面端组件库，由饿了么前端团队开源维护。它提供了丰富的 UI 组件，能够帮助开发者快速构建企业级中后台产品2。
官网地址
-
中文官网：一个 Vue 3 UI 框架 | Element Plus13
二、安装 Element Plus
2.1 安装命令
使用 npm 或 yarn 安装：
# 使用 npm
npm install element-plus --save# 使用 yarn
yarn add element-plus# 使用 pnpm
pnpm install element-plus
3.1 全局引入（推荐新手使用）
在项目的 main.js 或 main.ts 文件中进行配置：
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 中文语言包（可选）
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'const app = createApp(App)// 使用Element Plus
app.use(ElementPlus, {locale: zhCn, // 设置中文
})app.mount('#app')
3.2 图标全局注册（如果需要使用图标）
在同一个 main.js 文件中添加：
import * as ElementPlusIconsVue from '@element-plus/icons-vue'// 全局注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
四、在组件中使用
4.1 基本组件使用
安装配置完成后，可以直接在组件中使用 Element Plus 的组件：
html
<template><el-button type="primary">主要按钮</el-button><el-date-picker v-model="date" type="date" placeholder="选择日期" />
</template>
4.2 图标使用
html
<template><!-- 使用注册的图标组件 --><el-icon><Edit /></el-icon><!-- 作为按钮图标 --><el-button type="primary" icon="Edit">编辑</el-button>
</template><script setup>
// 如果按需引入图标，需要单独导入
import { Edit } from '@element-plus/icons-vue'
</script>
五、按需引入（优化方案）
如果希望减小打包体积，可以采用按需引入的方式：
5.1 安装必要插件
bash
npm install -D unplugin-vue-components unplugin-auto-import
5.2 修改 vite.config.js
javascript
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 组件，无需手动导入。
六、主题定制
Element Plus 支持通过 Sass 变量定制主题：
6.1 创建变量文件
在 src/styles/element/index.scss 中：
scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': #2c82ff,),)
);
6.2 修改 vite.config.js
javascript
export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@use "@/styles/element/index.scss" as *;`,},},},
})
七、注意事项
-
版本兼容性：确保使用的 Element Plus 版本与 Vue 3 版本兼容5
-
样式导入：必须导入 CSS 文件
import 'element-plus/dist/index.css'1 -
图标区别：Vue2 版本的 Element UI 使用字体图标，Vue3 的 Element Plus 使用 SVG 图标34
-
按需引入：对于大型项目，建议使用按需引入以减少打包体积6
八、总结
Element Plus 是 Vue 3 生态中最受欢迎的 UI 组件库之一，通过简单的安装和配置即可快速使用丰富的组件。本文介绍了从安装到主题定制的完整流程，适合新手开发者快速上手28。