Vue - 加载Element-plus

---

---

本文内容来自：https://www.bilibili.com/video/BV1Rs4y127j8/

---

关于 Element-plus

• 官网：https://element-plus.org/zh-CN/
• github : https://github.com/element-plus/element-plus

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Element Plus 基于 Vue 3，面向设计师和开发者的组件库

---

安装Element-Plus

npm install element-plus --save

---

Vue3加载Element-plus

---

完整引用

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

---

按需导入

按需导入才是我们的最爱，毕竟在真实的应用场景中并不是每个组件都会用到，这会造成不小的浪费

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

---

然后修改vue.config.js配置文件

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
})

---

最后，可以直接在组件中使用

<template>
	<el-button>Defaultel-button>
	<el-button type="primary">Primaryel-button>
template>

---

实时效果反馈

1. 在Vue3项目中引入饿了么UI组件库，下来命令正确的是：

A npm install --save element-iu

B vue add element

C npm install element-plus --save

D vue add element-plus

答案

1=>C

---

Vue3加载Element-plus的字体图标

Element-plus不仅仅是提供了各种组件，同时还提供了一整套的字体图标方便开发者使用

---

安装icons字体图标

npm install @element-plus/icons-vue

---

全局注册

在项目根目录下，创建plugins文件夹，在文件夹下创建文件icons.js文件

import * as components from "@element-plus/icons-vue";
export default {
    install: (app) => {
        for (const key in components) {
            const componentConfig = components[key];
            app.component(componentConfig.name, componentConfig);
        }
    },
};

---

引入文件

在main.js中引入icons.js文件

import elementIcon from "./plugins/icons";
app.use(elementIcon)

---

使用方式

接下来就可以直接在组件中引入使用了

<el-icon class="expand" color="#409EFC" :size="30">
    <expand />
el-icon>

---

2023-07-19