Element-plus 自动加载

使用 VUE-CLI 4.5.15 默认为 vue create xxx 的项目

安装依赖

npm i -D unplugin-auto-import unplugin-vue-components unplugin-icons @iconify-json/ep element-plus

不要安装 @element-plus/icons-vue 使用 @iconify-json/ep 替代

配置vue.config.js

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

module.exports = {
    configureWebpack: {
        plugins: [
            AutoImport({
                imports: ['vue'],
                resolvers: [ElementPlusResolver()]
            }),
            Components({
                resolvers: [
                    ElementPlusResolver(),
                    IconsResolver({
                        prefix: false,
                        enabledCollections: ['ep']
                    })
                ]
            }),
            Icons({
                autoInstall: true
            })
        ]
    }
}

使用方式

默认格式

{prefix}-{collection}-{icon}

vue.config.js 中配置了 IconsResolver下 prefix: false

<template>
    <ep-apple/> <!--Apple-->
    <ep-add-location/> <!--AddLocation-->
</template>

图标查看链接：https://icon-sets.iconify.design/ep/