Vue3 vite 自动导入element-plus UI 组件，包括icon

首先需要确保项目是否已成功引入 element-plus 依赖，引入成功后才能正常使用UI库相关组件。当使用 Element Plus 在 SSR 场景下开发时，需要在 SSR 期间进行特殊处理，以避免水合错误。对于Nuxt 用户，我们提供的 Nuxt 模块 已经包含了对这些问题的处理方案。 您只需要安装它就可以了。

一、自动导入api、自动按需导入组件

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

1、 unplugin-auto-import 自动导入Api，支持Vite、Webpack、Rollup and esbuild

这里以自动导入vue、vue-router为例，需在vite.config.js 引入 unplugin-auto-import/vite 并在 plugins 下配置使用插件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueDevTools(),
		AutoImport({
			imports: ['vue', 'vue-router']
		})
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

配置完成后项目中可以忽略掉关于vue、vue-router相关的 import 导入语句，项目运行不报错

<script setup>
	// import { useRoute } from 'vue-router';
	// import { computed, ref, reactive } from 'vue'
	const count = ref(0)
	const obj = reactive({})
	const doubled = computed(() => count.value * 2)
	const route = useRoute()
</script>

2、 unplugin-vue-components Vue自动按需导入组件，开箱即用，支持Vue 2和Vue 3， 不再需要手动导入再注册，支持： Vite, Webpack, Vue CLI, Rollup, esbuild等。

这里以自动导 ElementPlus 组件为例，需在vite.config.js 引入 unplugin-vue-components/vite 和 unplugin-vue-components/resolvers并在 plugins 下配置使用插件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		VueDevTools(),
		AutoImport({
			imports: ['vue', 'vue-router'], // 这行代码打酱油滴，请忽略
			resolvers: [ElementPlusResolver()],
		}),
		Components({
			resolvers: [ElementPlusResolver()],
		}),
	],
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./src', import.meta.url))
		}
	}
})

配置完成后项目中可以忽略掉组件 import 导入语句，项目运行不报错

<template>
	<div>
		<HelloWorld></HelloWorld>
		<IconCommunity></IconCommunity>
		<el-button>组件导入测试</el-button>
	</div>
</template>
<script setup>
	// import HelloWorld from './components/HelloWorld.vue'
	// import IconCommunity from './components/icons/IconCommunity.vue'
</script>

关于 Components 下的其他配置和说明

 // vite.config.js
 Components({
        // dirs 指定组件所在位置，默认为 src/components
        // 可以让我们使用自己定义组件的时候免去 import 的麻烦
        dirs: ['src/components/', 'src/pages/lauch/components/'],
        
        // 配置需要将哪些后缀类型的文件进行自动按需引入，'vue'为默认值
        extensions: ['vue'],
        
        // 解析组件，这里以 Element Plus 为例
        resolvers: [ElementPlusResolver()],
        
        // dts：true 或者为 'src/components.d.ts'时，则会自动生成components.d.ts
        dts: true,
        
        // 遍历子目录
        deep: true
      })

二、难点：自动导入 element-plus 的 Icon 图标集，参考 element-plus-best-practices

下载安装依赖： unplugin-icons。

npm install @element-plus/icons-vue unplugin-icons -D

效果如下，按需导入，无需注册：

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// 注册所有图标，您需要从 `@element-plus/icons-vue` 中导入所有图标并进行全局注册。
// for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
// 	app.component(key, component)
// }

app.use(createPinia())
app.use(router)
app.mount('#app')

<template>
	<div>
		<!-- <el-icon>
			<Search />
		</el-icon> -->
		<i-ep-search />
		<IEpSearch />
	</div>
</template>

需在vite.config.js 引入 unplugin-icons/vite 和 unplugin-icons/resolver并在 plugins 下配置使用。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import IconResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		VueDevTools(),
		AutoImport({
			imports: ['vue', 'vue-router'],
			resolvers: [ElementPlusResolver(), IconResolver({ prefix: 'Icon' })],
		}),
		Components({
			resolvers: [ElementPlusResolver(), IconResolver({ enabledCollections: ['ep'] })],
		}),
		Icons({ scale: 1, defaultClass: 'el-icon', autoInstall: true }),
	],
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./src', import.meta.url))
		}
	}
})