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 *;`,
      },
    },
  },
})

七、注意事项

1. 版本兼容性：确保使用的 Element Plus 版本与 Vue 3 版本兼容5

2. 样式导入 ：必须导入 CSS 文件 import 'element-plus/dist/index.css'1

3. 图标区别：Vue2 版本的 Element UI 使用字体图标，Vue3 的 Element Plus 使用 SVG 图标34

4. 按需引入：对于大型项目，建议使用按需引入以减少打包体积6

八、总结

Element Plus 是 Vue 3 生态中最受欢迎的 UI 组件库之一，通过简单的安装和配置即可快速使用丰富的组件。本文介绍了从安装到主题定制的完整流程，适合新手开发者快速上手28。