element plus图标全局加载与自动导入

Vite配置：集成unplugin-icons,auto-import和vue组件,

最新推荐文章于 2025-07-04 15:40:21 发布

原创最新推荐文章于 2025-07-04 15:40:21 发布 · 532 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

本文介绍了如何在Vite项目中安装并配置unplugin-icons、unplugin-auto-import和unplugin-vue-components插件，以实现自动导入图标和Vue组件，提供了一个详细的配置示例。

安装相关依赖：

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

在 vite.config.ts 中配置使用

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'
 
export default () => {
  return defineConfig({
    plugins: [
      AutoImport({
        resolvers: [
          // 自动导入图标
          IconsResolver({
            prefix: 'Icon',
          }),
        ],
      }),
      Components({
        resolvers: [
          IconsResolver({
            enabledCollections: ['ep'],
          })
        ],
      }),
      Icons({
        autoInstall: true,
      }),
    ]
  })
})

使用示例：<i-ep-edit />