vue3中vue.config.js配置Element-plus组件和Icon图标实现按需自动引入实例代码

npm i unplugin-auto-import unplugin-vue-components unplugin-icons -D

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')
const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')

module.exports = defineConfig({
   ...
    configureWebpack: {
        plugins: [
            //配置webpack自动按需引入element-plus，
            require('unplugin-element-plus/webpack')({
                libs: [{
                    libraryName: 'element-plus',
                    esModule: true,
                    resolveStyle: (name) => {
                        return `element-plus/theme-chalk/${name}.css`
                    },
                }, ]
            }),
            AutoImport({
                resolvers: [
                    // 自动导入图标组件
                    IconsResolver({
                        prefix: 'Icon',
                    }),
                    ElementPlusResolver()
                ]
            }),
            Components({
                resolvers: [
                    // 自动注册图标组件
                    IconsResolver({
                        enabledCollections: ['ep'],
                    }),
                    ElementPlusResolver()
                ]
            }),
            Icons({
                autoInstall: true,
            }),
        ],
    },

})

<el-icon> 
    <i-ep-edit/> 
</el-icon>

<i-ep-edit/>

import { Delete, Edit } from '@element-plus/icons-vue'
<el-button type="success" size="small" :icon="Edit" round @click="openAddUserForm('add')">新增用户</el-button>

npm i unplugin-element-plus -D

 plugins: [
            //配置webpack自动按需引入element-plus，
            require('unplugin-element-plus/webpack')({
                libs: [{
                    libraryName: 'element-plus',
                    esModule: true,
                    resolveStyle: (name) => {
                        return `element-plus/theme-chalk/${name}.css`
                    },
                }, ]
            }),
....
]

buttons: [{
            name: '生成案例',
            title: 'generateTestCase',
            type: 'primary',
            size: 'default', //可以是default，small,large
            icon: 'Edit',
            // 按钮是否为朴素类型
            // plain: true,
            onClick: null
        }
]

  const Button = (form, data) =>(
    !data.isHidden?<ElButton
        type={data.type}
        size={data.size}
        icon= {data.icon}
        plain={data.plain}
        onClick={data.onClick}
        >
          {data.name}</ElButton>:''
  )

import { DocumentDelete, Edit, Download } from '@element-plus/icons-vue'
import { shallowRef } from 'vue'

 buttons: [{
            name: '生成案例',
            title: 'generateTestCase',
            type: 'primary',
            size: 'default', //可以是default，small,large
            icon: shallowRef(Edit),
            // 按钮是否为朴素类型
            // plain: true,
            onClick: null
        }]

module.exports = defineConfig({
......
    css: {
        extract: {
            ignoreOrder: true
        }
    }
})