element-plus按需自动导入的配置 以及icon图标不显示的问题解决

安装插件

在使用 Element UI 时,如果你希望自动注册图标组件,可以通过使用 IconsResolver 来实现。IconsResolver 是 Vite 插件 unplugin-vue-components 的一部分,这个插件可以帮助你自动导入组件,包括 Element UI 的图标组件。

首先,确保你已经安装了 unplugin-vue-componentsunplugin-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.jsvite.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'],
}),
相关推荐
_码力全开_6 小时前
Python从入门到实战 (14):工具落地:用 PyInstaller 打包 Python 脚本为可执行文件
开发语言·数据结构·python·个人开发
tpoog6 小时前
[C++项目框架库]redis的简单介绍和使用
开发语言·c++·redis
lyj1689976 小时前
CSS中 min() max() clamp()函数
前端·javascript·css
yi碗汤园6 小时前
【一文了解】C#的StringComparison枚举
开发语言·前端·c#
Larry_Yanan6 小时前
QML学习笔记(十九)QML的附加信号处理器
开发语言·笔记·qt·学习·ui
某不知名網友6 小时前
I/O 多路转接之 epoll:高并发服务器的性能利器
开发语言·php
郝学胜-神的一滴7 小时前
深入理解 C++ 中的 `std::bind`:功能、用法与实践
开发语言·c++·算法·软件工程
我的div丢了肿么办7 小时前
echarts4升级为echarts5的常见问题
前端·javascript·echarts
zhangfeng11337 小时前
wgcna 相关性热图中4个颜色 4个共表达模块 的模块基因是否都要做GO/KEGG分析”,核心取决于你的**研究目标和模块的生物学意义*
开发语言·r语言·生物信息
come112347 小时前
Go 语言中的结构体
android·开发语言·golang