当前位置：首页 > news >正文

Vue3集成Element Plus完整指南：从安装到主题定制上

news 来源：原创 2025/4/21 13:53:20

一、Element Plus简介

Element Plus是一套基于Vue 3.0的桌面端组件库，由饿了么前端团队开源维护。它提供了丰富的UI组件，能够帮助开发者快速构建企业级中后台产品。

1. 安装与卸载

bash

复制

下载

# 安装最新版本
npm install element-plus -S# 卸载
npm uninstall element-plus

官方文档地址：Element Plus官网

2. 基础集成配置

在Vue项目的main.js中进行基本配置：

javascript

复制

下载

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, // 设置中文
})

3. 图标系统集成

Element Plus使用独立的图标库，需要单独安装：

bash

复制

下载

npm install @element-plus/icons-vue

在main.js中全局注册图标组件：

javascript

复制

下载

import * as ElementPlusIconsVue from '@element-plus/icons-vue'// 全局注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

使用示例：

html

复制

下载

运行

<div style="padding: 50px;"><el-icon size="25" color="red"><Service /></el-icon>
</div>

4. 组件中使用图标

在Vue单文件组件中：

html

复制

下载

运行

<script setup>
import { Service } from "@element-plus/icons-vue"
</script><template><!-- 输入框后缀图标 --><el-input :suffix-icon="Service" style="width: 100px;"></el-input><!-- 输入框前缀图标 --><el-input :prefix-icon="Service" style="width: 100px;"></el-input><!-- 按钮图标 --><el-button type="primary" icon="Service"></el-button>
</template>

注意：<script setup>是Vue 3的组合式API语法糖，简化了组件编写。

二、Element Plus主题定制

Element Plus支持通过Sass变量轻松定制主题样式。

1. 安装必要依赖

bash

复制

下载

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

2. 创建样式变量文件

在src/css_image_assets/目录下创建index.scss文件：

scss

复制

下载

@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ("base": #2c82ff),'success': ("base": #31bf00),'warning': ("base": #ffad00),'danger': ("base": #e52f2f),'info': ("base": #8055ff),)
);

3. 配置Vite

修改vite.config.js：

javascript

复制

下载

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// 自动导入插件
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(), vueDevTools(), AutoImport({resolvers: [ElementPlusResolver()],}), Components({resolvers: [ElementPlusResolver({ importStyle: "sass" })]})],css: {preprocessorOptions: {scss: {additionalData: `@use "@/css_image_assets/index.scss" as *;`,},},},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})