Vue3 自动引入组件及函数、动态生成侧边栏路由

Vue3 自动引入组件及函数、动态生成侧边栏路由

1、安装依赖

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

插件使用说明

unplugin-auto-import 说明 —— 自动引入函数、组件

unplugin-vue-components 说明 —— 自动注册组件

unplugin-icons 说明 —— 自动安装、注册图标

2、vite.config.ts 配置文件

import {fileURLToPath, URL} from 'node:url';
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';

// 自动导入插件
// https://github.com/antfu/unplugin-auto-import
import AutoImport from 'unplugin-auto-import/vite';
// https://github.com/antfu/unplugin-vue-components
import Components from 'unplugin-vue-components/vite';
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
// https://github.com/antfu/unplugin-icons
import Icons from 'unplugin-icons/dist/vite';
import IconsResolver from 'unplugin-icons/dist/resolver';
import {FileSystemIconLoader} from "unplugin-icons/loaders";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            dirs: ['src', "src/**"],
            // 自动导入 Vue 相关函数，如 ref、reactive、toRef 等
            imports: ['vue', 'pinia', 'vue-router'],
            resolvers: [
                // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
                ElementPlusResolver(),
                // 自动解析 ElementPlus 图标组件
                IconsResolver({
                    prefix: 'i',
                    enabledCollections: ['ep'],
                    // 识别自定义图标集
                    customCollections: ['zj']
                })
            ],
            dts: 'src/auto-import.d.ts'
        }),
        Components({
            // 要搜索组件的目录的相对路径。默认 ['src/components']
            dirs: ['src'],
            // 组件的有效文件扩展名。
            extensions: ['vue'],
            // 搜索子目录
            deep: true,
            // 生成dts文件
            dts: 'src/components.d.ts',
            // 指定项目 vue 版本
            version: 3,
            resolvers: [
                // 自动导入 Element Plus 组件
                ElementPlusResolver(),
                // 自动注册图标组件
                IconsResolver({
                    prefix: 'i',
                    enabledCollections: ['ep'],
                    // 识别自定义图标集
                    customCollections: ['zj']
                }),
            ],
        }),
        Icons({
            compiler: 'vue3',
            // 自动安装图标集
            autoInstall: true,
            // 自定义图标加载
            customCollections: {
                // 定义一个名为 zj 的图标合集（element-ui的图标合集名称为 ep
                // 使用形式 i-zj-svg文件名
                zj: FileSystemIconLoader('src/assets/icon'),
                // 给svg文件设置fill="currentColor"属性，使图标的颜色具有适应性
                // home: FileSystemIconLoader('src/assets/svg/home', svg => svg.replace(/^<svg /, '<svg fill="currentColor" '))
            }
        })
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL("./src", import.meta.url))
        }
    }
})

tips：可以不用安装图标库，unplugin-icons 的 autoInstall 配置项可以自动安装使用到的图标库

图标来源：[iconify](Icon Sets • Iconify)

3、动态注册侧边栏图标

<template>
    <el-icon v-for="(item, i) in obj" :key="i">
        <component :is="item.icon"/>
    </el-icon>
</template>
<script setup lang="ts">
// 不用引入直接使用
let obj = [
    {icon: IEpPlus},
    {icon: IEpMinus},
    {icon: IEpHouse},
    {icon: IEpDelete}
]
</script>
<style scoped>
</style>

4、侧边栏图标

// 自动导入图标
// https://www.cnblogs.com/lovewhatIlove/p/17201904.html
const ROUTE_ICON = {
    IEpFold: IEpMenu,
    IZjSystemOption: IZjSystemOption,
}
........
// ---------------------- 系统管理 -------------------------
{
    path: 'system',
    name: "system",
    redirect: '/home/system/permission',
    meta: {
        title: "系统管理",
        icon: ROUTE_ICON.IZjSystemOption
    },
    children: [
        {
            path: 'permission',
            name: 'permission',
            component: () => import("@/views/system/permission/index.vue"),
            meta: {
                title: "权限管理",
                icon: ROUTE_ICON.IEpFold
            }
        },
        {
            path: 'role',
            name: 'role',
            component: () => import("@/views/system/role/index.vue"),
            meta: {
                title: "角色管理",
                icon: ROUTE_ICON.IZjSystemOption
            }
        }
    ]
},