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}}]
},