安装插件
在使用 Element UI 时,如果你希望自动注册图标组件,可以通过使用 IconsResolver
来实现。IconsResolver
是 Vite 插件 unplugin-vue-components
的一部分,这个插件可以帮助你自动导入组件,包括 Element UI 的图标组件。
首先,确保你已经安装了 unplugin-vue-components
和 unplugin-auto-import
(用于自动导入 API)。你可以通过 npm 或 yarn 来安装这些依赖:
javascript
npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons
安装 Element Plus(如果你使用的是 Element Plus)
javascript
npm install element-plus
配置 Vite
在 vite.config.js
或 vite.config.ts
中添加以下配置:
javascript
import { fileURLToPath, URL } from 'node:url'
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
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'
// import 'dotenv/config';
// // require('dotenv').config();
// const env = dotenv.config({ path: './.env' }).parsed
const pathSrc = fileURLToPath(new URL('./src', import.meta.url))
// https://vite.dev/config/
// export default defineConfig({
// base: process.env.NODE_ENV === 'production'
// ? '/your-project/'
// : '/'
// })
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
AutoImport({
imports: ['vue', 'vue-router'],
resolvers: [
ElementPlusResolver(),
IconsResolver({
prefix: 'Icon',
}),
],
dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
}),
Components({
resolvers: [
IconsResolver({
enabledCollections: ['ep'],
}),
ElementPlusResolver()
],
directoryAsNamespace: true,
dts: path.resolve(pathSrc, 'components.d.ts'),
}),
Icons({
autoInstall: true,
compiler: 'vue3'
}),
// Inspect(),
],
resolve: {
alias: {
'@': pathSrc
},
},
define: {
'process.env': process.env,
},
server: {
host: '192.168.1.100',
port: 3000,
open: true
},
devServer: {
proxy: {
"/api": {
target: "http://192.168.1.100:3000",
pathRewrite: { "^/api": "" },
ws: true,
changeOrigin: true,
},
},
},
})
在组件中使用图标
有个官方文档没提及的地方,用这种方式自动引入的图标写法要稍微改变,之前写法是:
html
<el-icon><Link /></el-icon>
这样图标不会显示出来,尝试后发现要改成:
html
<el-icon><i-ep-Link /></el-icon>
或
<i-ep-Link />
前面要加上i-ep-前缀,文档没提示这点,应该是因为这里的配置,需要加上ep
javascript
IconsResolver({
enabledCollections: ['ep'],
}),