vue3+vite自动引入elment-plus 和icons 配置

1.自动已入elment-plus

看elment-plus官网,自动引入组件

pnpm install element-plus --save

npm install -D unplugin-vue-components unplugin-auto-import

在vite中配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

2.自动引入icon

查看elment-plus自动引入icon 官网指南

antfu大神github关于icon自动引入的使用

pnpm install @element-plus/icons-vue  --save

npm i -D unplugin-icons @iconify/json

配置vite

// vite.config.ts
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Components({
      resolvers: [IconsResolver()], // 这里是个数组
    }),
    Icons({
      compiler: 'vue3',
      autoInstall: true,
    }),
  ],
}

3.一般都是同时安装elment-plus 和icon

整体配置如下

import { defineConfig } from 'vite'

//自动引入组件 和icons

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


export default defineConfig(({ command, mode }) => {
 
  return {
    resolve: {
      alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
    },
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [IconsResolver(), ElementPlusResolver()],
      }),
      Icons({
        compiler: 'vue3',
        autoInstall: true,
      }) 
    ]
  }
})