以自动导入方式使用element-plus/icons

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

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

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #element-plus

前端专栏收录该内容

156 篇文章

订阅专栏

本文介绍如何在Vite3环境中集成Element Plus组件库及图标，通过配置vite-plugin、unplugin-auto-import等插件实现组件与图标的自动导入，简化开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版本

vite 3.1
element-plus 2.2
@element-plus/icons 2.0

步骤

1. 添加依赖

"element-plus": "^2.2.17",
"@element-plus/icons-vue": "^2.0.10",
"@iconify-json/ep": "^1.1.7",
"unplugin-icons": "^0.14.11",
"unplugin-auto-import": "^0.11.2",
"unplugin-icons": "^0.14.11",
"unplugin-vue-components": "^0.22.8",

2. vite配置

vite.config.ts

import {resolve} from 'path'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [
            	// 自动导入element-plus组件
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
                    prefix: 'Icon'
                })
            ],
        }),
        Components({
            resolvers: [
            	// 自动导入element-plus组件
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
                    enabledCollections: ['ep']
                })
            ],
        }),
        // 自动导入图标组件
        Icons({
            autoInstall: true,
        })
    ]
})