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. 项目中使用

 <el-icon class="expand" ><expand/></el-icon>

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

<template>
  <el-icon :size="size" :color="color">
    <component :is="name"></component>
  </el-icon>
</template>

<script>
import { defineComponent } from "vue";
import * as Icons from "@element-plus/icons";

export default defineComponent({
  components: Icons,
  name: "ElIcons",
  props: {
    name: {
      type: String,
      required: true,
    },
    size: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
  },
});
</script>

6. 项目中使用

<template>
 	<el-icons name="Close" size="20" />
</template>

<script setup>
import elIcons from '../components/Icon.vue'
</script>