45.Vue3：加载Element-plus

一、介绍

官网地址：https://element-plus.gitee.io/zh-CN/
基于Vue3的一套桌面组件库和字体图标，可以直接引用。

二、安装Element-Plus

cnpm install element-plus --save

三、引用方式

1. 完整引用

如果对打包后的文件大小无所谓，就可以使用完整导入更方便

在main.js中导入

import { ElementPlus } from "element-plus"
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

2. 按需导入

这个才是我们常用的方法

1. 首先，需要安装两个插件

cnpm install -D unplugin-vue-compoents unplugin-auto-import

2. 然后修改vue.config.js配置文件
   可以直接粘贴过去就好

const { defineConfig } = require('@vue/cliservice')
const AutoImport = require('unplugin-autoimport/webpack')
const Components = require('unplugin-vuecomponents/webpack')
const { ElementPlusResolver } =
require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
     }),
      Components({
        resolvers: [ElementPlusResolver()]
     })
   ]
 }
})

四、使用组件

去官网中复制源码，粘贴到对应位置就好

关于字体图标

一、安装icons字体图标

cnpm install @element-plus/icons-vue

二、按需导入

同上文

三、全局注册

在src/plugins.icons.js 粘贴代码

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

四、引入文件

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

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

五、使用方式

需要什么粘贴就好