element-plus 自动导入的使用方式

一、element-plus 安装

npm install element-plus --save

// 按需自动导入
npm install -D unplugin-vue-components unplugin-auto-import

二、vue.config.js 配置

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

module.exports = {
    publicPath:'./',
    configureWebpack: {
        // ...
        plugins: [
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
        ],
    }
}

三、Icon的使用

1. 安装(第一种方式)

npm install @element-plus/icons

2. 全局注册 (新建svgicon.js文件)

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

3. main.js中引入

import elementIcon from "./plugins/svgicon";

createApp(App).use(elementIcon).mount("#app");

4. 项目中使用

5. 第二种方式(注册组件 新建 Icon.vue)

6. 项目中使用