安装 Element Plus
步骤 1：安装 Element Plus
Element Plus是一个基于 Vue 3 的组件库,我们首先需要将其安装到我们的项目中。
步骤 2：安装开发依赖插件,实现按需自动导入
为了更方便地使用 Element Plus 组件,我们需要安装两个插件：unplugin-vue-components 和 unplugin-auto-import。
1pnpm add -D unplugin-vue-components unplugin-auto-import
步骤 3：配置 Vite
接下来,我们需要在项目的 Vite 配置文件中添加这两个插件,以便自动导入 Element Plus 组件。
1import { fileURLToPath, URL } from "node:url"
2import vue from "@vitejs/plugin-vue"
3import AutoImport from "unplugin-auto-import/vite" // [!code focus]// [!code ++]
4import Components from "unplugin-vue-components/vite" // [!code focus]// [!code ++]
5import { ElementPlusResolver } from "unplugin-vue-components/resolvers" // [!code focus]// [!code ++]
6import { defineConfig } from "vite"
7
8// https://vite.dev/config/
9export default defineConfig({
10 resolve: {
11 alias: {
12 "@": fileURLToPath(new URL("./src", import.meta.url)),
13 },
14 },
15 plugins: [
16 vue(),
17 AutoImport({ // [!code focus]// [!code ++]
18 resolvers: [ElementPlusResolver()], // [!code focus]// [!code ++]
19 }), // [!code focus]// [!code ++]
20 Components({ // [!code focus]// [!code ++]
21 resolvers: [ElementPlusResolver()], // [!code focus]// [!code ++]
22 }), // [!code focus]// [!code ++]
23 ],
24})
步骤 4：在组件中直接使用 Element Plus
配置完成后,你可以直接在 Vue 组件中使用 Element Plus 提供的 UI 组件,无需手动导入。
1<template>
2 <el-button>Default</el-button> // [!code focus]
3</template>
请注意,<el-button> 是 Element Plus 中按钮组件的标签,你可以直接使用它,而不需要在脚本部分显式导入。
步骤 5：注册所有图标
（1）在 common/plugin 目录下新建 element-plus-icons.ts 和 index.ts 文件
1import type { App } from "vue"
2import * as ElementPlusIconsVue from "@element-plus/icons-vue"
3
4export function installElementPlusIcons(app: App) {
5 // 注册所有 Element Plus Icons
6 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
7 app.component(key, component)
8 }
9}
1import type { App } from "vue"
2import { installElementPlusIcons } from "./element-plus-icons"
3
4export function installPlugins(app: App) {
5 installElementPlusIcons(app)
6}
:::
（2）在 main.ts 中引入并注册
1// core
2import { createApp } from "vue"
3import { router } from "@/router"
4import { pinia } from "@/pinia"
5import { installPlugins } from "@/common/plugins" // [!code focus]// [!code ++]
6import App from "./App.vue"
7
8// 创建应用实例
9const app = createApp(App)
10
11// 安装插件 // [!code focus]// [!code ++]
12installPlugins(app) // [!code focus]// [!code ++]
13
14// 挂载路由和状态管理
15app.use(router).use(pinia)
16
17// router 准备就绪后挂载应用
18router.isReady().then(() => {
19 app.mount("#app")
20})
（3）使用
1<template>
2 <div>
3 <Edit/> // [!code focus]// [!code ++]
4 </div>
5</template>
步骤 6：自动导入icon图标配置（可选）
为了简化 Element Plus 图标的使用并自动导入,我们可以配置 Vite 插件 unplugin-icons。
（1）安装图标库和插件
首先,安装 Element Plus 图标库和 unplugin-icons 插件：
1pnpm add @element-plus/icons-vue
2pnpm add -D unplugin-icons
（2）配置 Vite 插件
在 Vite 配置文件中,配置自动导入 Element Plus 图标：
1import { fileURLToPath, URL } from "node:url"
2import vue from "@vitejs/plugin-vue"
3import AutoImport from "unplugin-auto-import/vite"
4import Components from "unplugin-vue-components/vite"
5import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
6import Icons from "unplugin-icons/vite" // [!code focus]// [!code ++]
7import IconsResolver from "unplugin-icons/resolver" // [!code focus]// [!code ++]
8import { defineConfig } from "vite"
9
10// https://vite.dev/config/
11export default defineConfig({
12 resolve: {
13 alias: {
14 "@": fileURLToPath(new URL("./src", import.meta.url)),
15 },
16 },
17 plugins: [
18 vue(),
19 AutoImport({
20 resolvers: [
21 ElementPlusResolver(),
22 // 自动导入图标组件 // [!code focus]// [!code ++]
23 IconsResolver(), // [!code focus]// [!code ++]
24 ],
25 }),
26 Components({
27 resolvers: [
28 // 自动注册图标组件 // [!code focus]// [!code ++]
29 IconsResolver({ // [!code focus]// [!code ++]
30 prefix: "icon", // 使用 'icon-' 作为前缀,默认是 'i' // [!code focus]// [!code ++]
31 enabledCollections: ["ep"], // 指定Element Plus图标库 // [!code focus]// [!code ++]
32 }), // [!code focus]// [!code ++]
33 ElementPlusResolver(),
34 ],
35 }),
36 Icons({ // [!code focus]// [!code ++]
37 autoInstall: true, // 自动安装图标 // [!code focus]// [!code ++]
38 }), // [!code focus]// [!code ++]
39 ],
40})
（3）在项目中使用图标
配置完成后,你可以直接在 Vue 组件中使用 Element Plus 图标,格式为 {prefix}-{collection}-{icon}：
1<template>
2 <div>
3 <Edit/> // [!code --]
4 <icon-ep-Edit/> // [!code ++]
5 </div>
6</template>
步骤 7：定制主题色（可选）
（1）安装 sass
为了使用 Element Plus 的 scss 变量,您需要在项目中安装 sass：
（2）创建自定义样式文件
创建一个 scss 文件来定义您的自定义主题色。例如,在 common/assets/element/index.scss：
1/* 只需要重写你需要的即可 */
2@forward 'element-plus/theme-chalk/src/common/var.scss' with (
3 $colors: (
4 'primary': (
5 'base': green,
6 ),
7 'success': (
8 'base': green,
9 ),
10 'warning': (
11 'base': green,
12 ),
13 'danger': (
14 'base': green,
15 ),
16 'error': (
17 'base': green,
18 ),
19 ),
20);
（3）配置 Vite 自动导入样式
在 vite.config.ts 中配置 Vite 以使用自定义的 scss 文件,并确保 Element Plus 组件样式正确导入：
1import { fileURLToPath, URL } from "node:url"
2import vue from "@vitejs/plugin-vue"
3import AutoImport from "unplugin-auto-import/vite"
4import Components from "unplugin-vue-components/vite"
5import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
6import { defineConfig } from "vite"
7
8// https://vite.dev/config/
9export default defineConfig({
10 resolve: {
11 alias: {
12 "@": fileURLToPath(new URL("./src", import.meta.url)),
13 },
14 },
15 css: { // [!code focus]// [!code ++]
16 preprocessorOptions: { // [!code focus]// [!code ++]
17 scss: { // [!code focus]// [!code ++]
18 additionalData: `@use "@/common/assets/element/index.scss" as *;`, // [!code focus]// [!code ++]
19 }, // [!code focus]// [!code ++]
20 }, // [!code focus]// [!code ++]
21 }, // [!code focus]// [!code ++]
22 plugins: [
23 vue(),
24 AutoImport({
25 resolvers: [ElementPlusResolver()],
26 }),
27 Components({
28 resolvers: [
29 ElementPlusResolver({
30 importStyle: "sass", // [!code focus]// [!code ++]
31 }),
32 ],
33 }),
34 ],
35})
