No.69 Vue---加载Element—plus

一、Element

elementui官网

 

1.1 安装

 

 

 

 

 

1.2 完整引用

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

第一步：在主文件中导入

 

第二步去Element 官网复制代码去：

 粘贴到helloworld.vue中

 效果：

 

1.3 按需导入

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

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

 

配置：

 

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()]
      })
    ]
  }
})

　　

 

 二、Vue3加载Element-plus的字体图标

1.安装：

 2.全局注册：在项目根目录下，创建 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);
        }
    },
};

　　

 3.引入文件

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