element-plus和icon自动按需引入

element-plus和icon自动按需引入

按需引入最后打包出来的体积不会这么大，借助插件实现自动按需引入，就不用再去手动引入了！！！需要借助两个插件：unplugin-vue-components，unplugin-auto-import

pnpm install -D unplugin-vue-components unplugin-auto-import unplugin-icons

如果是vite创建的项目，则在vite.config.ts文件配置为：

// vite.config.ts
import {
    
    defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {
    
    ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import AutoImport from 'unplugin-auto-import/vite'

import path from 'node:path'

const pathSrc = path.resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig({
    
    
    plugins: [
        vue(),
        AutoImport({
    
    
            resolvers: [
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
    
    prefix: 'Icon'}),
            ],
            // 自动生成components.d.ts文件
            dts: path.resolve(pathSrc, 'components.d.ts'),
        }),
        Components({
    
    
            resolvers: [
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
    
    prefix: 'Icon'}),
            ],
            // 自动生成components.d.ts文件
            dts: path.resolve(pathSrc, 'components.d.ts'),
        }),
        Icons({
    
    autoInstall: true}),
    ],
})