【Web系列二十九】前端组件图标按需引入

最新推荐文章于 2025-05-15 17:16:34 发布

原创

最新推荐文章于 2025-05-15 17:16:34 发布 · 681 阅读

写在前面

之前在开发时使用了element-plus的一些组件，并通过按需引入的方式使用，但是在使用时发现了一些问题，特此记录一下。

组件图标完全自动按需引入

安装依赖

"vue": "^3.4.29",
"vue-router": "^4.0.10",
"element-plus": "^2.7.6",
"@element-plus/icons": "^0.0.11",
"@iconify-json/ep": "^1.1.14",
"@vitejs/plugin-vue": "^5.0.5",
"unplugin-icons": "^0.19.0",
"unplugin-auto-import": "^0.17.6",
"unplugin-vue-components": ""^0.27.1"

配置

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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'

export default ({ command, mode }) => {
    return defineConfig({
        plugins: [
            vue(),
            AutoImport({
                // Auto import functions from Vue, e.g. ref, reactive, toRef...
                // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
                imports: ['vue', 'vue-router'],
                // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (

标签