# dynamic-router

**Repository Path**: 4277527/dynamic-router

## Basic Information

- **Project Name**: dynamic-router
- **Description**: 一个使用vue3编写的动态路由以及动态菜单生成的案例项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-20
- **Last Updated**: 2025-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite+vue3+ts 构建项目流程

# 1.创建 vue3 项目

npm
npm create vite@latest

yarn
yarn create vite

输入项目的名字
Project name: » vite-project

按上下选择框架，这就选 vue 然后回车

选择 ts

# 2.安装全局的项目样式初始化文件

npm install normalize.css
main.ts 中进行配置
import 'Normalize.css';

# 3.安装 less/scss

安装 less 依赖
npm add -D less
安装 scss and sass 依赖
npm add -D sass

# 4.安装 @types/node 支持 这点狠重要 必须要优先安装,否则第 5 点的 path 模块会找不到

npm i @types/node

# 5.全局 scss 样式文件的配置

    src 目录下创建 style 文件夹,然后在文件夹下创建 common.scss 项目全局的 scss 样式文件
    vite.config.ts 中进行配置
        import path from 'path';
        import { resolve } from 'path'; // 主要用于 alias 文件路径别名
        plugins 平级节点添加已下属性
        //resolver 配置
        resolve: {
            alias: {
                // 别名配置
                // 键必须以斜线开始和结束
                '@': resolve(\_\_dirname, 'src'),
                components: resolve(\_\_dirname, './src/components'),
                assets: resolve(\_\_dirname, './src/assets'),
                '#': resolve(\_\_dirname, 'types'),
                build: resolve(\_\_dirname, 'build')
            },
            // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
        },

        //配置全局 scss
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@import "@/style/common.scss";'
                }
            }
        }

# 6.服务器开发配置 自动打开 运行端口等配置

        //开发服务器配置
        server: {
            port: 8999, //指定开发服务器端口：默认 3000
            open: true, //启动时自动在浏览器中打开
            proxy: {
                //配置自定义代理规则
                // 字符串简写写法
                "/jpi": "http://192.168.1.97:4567",
                "/api": {
                    target: "http://192.168.1.97:108",
                    changeOrigin: true, //是否跨域
                    rewrite: path => path.replace(/^\/api/, ""),
                },
            },
        },

# 6.1 环境变量的配置

    项目根目录分别添加 开发、生产和测试环境的文件!
    .env.development
    .env.production
    .env.test

    文件内容

    变量必须以 VITE_ 为前缀才能暴露给外部读取
    NODE_ENV = 'development'
    VITE_APP_TITLE = ''
    VITE_APP_BASE_API = '/dev-api'

    NODE_ENV = 'production'
    VITE_APP_TITLE = ''
    VITE_APP_BASE_API = '/prod-api'

    NODE_ENV = 'test'
    VITE_APP_TITLE = ''
    VITE_APP_BASE_API = '/test-api'

    配置运行命令 package.json
    "scripts": {
        "dev": "vite --open",
        "build:test": "vue-tsc && vite build --mode test",
        "build:pro": "vue-tsc && vite build --mode production"
    },

    通过import.meta.env获取环境变量

# 7.安装自动导入插件,安装之后不用导入 vue 中 hook reactive ref

        npm install -D unplugin-vue-components unplugin-auto-import
        vite.confit.ts 中进行配置
        // 自动导入 vue 中 hook reactive ref 等
        import AutoImport from 'unplugin-auto-import/vite';
        //自动导入 ui-组件 比如说 ant-design-vue element-plus 等
        import Components from 'unplugin-vue-components/vite';

        //plugins 中进行配置
        plugins: [
            AutoImport({
                    //安装两行后你会发现在组件中不用再导入 ref，reactive 等
                    imports: ['vue', 'vue-router'],
                    //存放的位置
                    dts: 'src/auto-import.d.ts'
                }),
            Components({
                    // 引入组件的,包括自定义组件
                    // 存放的位置
                    dts: 'src/components.d.ts'
                })
        ],

# 8.解决配合别名访问后使用@符号报红的问题

        在 src 目录下创建文件 env.d.ts,拷贝以下内容
        declare module "\*.vue" {
            import type { DefineComponent } from "vue"
            const component: DefineComponent<{}, {}, any>
            export default component
        }

        在 tsconfig.json 中添加文件配置
        "baseUrl": "./",
        "paths": {
            "@/_":["src/_"],
            "#/_":["types/_"]
        }

# 9.安装 router

        npm install vue-router@4

        src 下创建一个 route 文件夹，再创建一个 index.ts 文件
        import { createRouter, createWebHistory } from "vue-router";
        let routes= [
            {
            path: '/',
            name: 'home',
            //使用 import 可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
            component: () => import('../view/homeView.vue')
            },
        ]
        // 路由
        const router = createRouter({
            history: createWebHistory(),
            routes
        })
        // 导出
        export default router

        main.ts 中进行配置使用
        //router配置
        import router from "./route/index";
        createApp(App).use(router)

# 10.pinia 的使用

    //安装 pinia 和持久化插件
    npm install pinia --save
    npm i pinia-plugin-persist --save

    //main.ts文件中引入
    import { createPinia } from 'pinia'
    import piniaPluginPersist from "pinia-plugin-persist" //pinia持久化
    const pinia = createPinia()
    pinia.use(piniaPluginPersist)
    app.use(pinia)

    //pinia模块化定义方式
    参考项目中store的文件目录,项目采用了模块化的处理方式

    //引入store文件
    import Stroe from "../../store/index"
    import { storeToRefs } from "pinia"
    const store = Stroe()

    //获取pinia中数据的几种方式
    //方式一:直接通过store.模块名.变量,此种方式只能直接获取变量值,不能将定义的数据申明为响应式
    const token1 = store.useAccount.token //这里如果直接修改token的值是不能同步更改pinia中的数据的值的,不具备响应式
    console.log("获取方式一:", token1)
    //方式二:通过storeToRefs()方式,此方式能将pinia中的数据申明为响应式操作
    const { token, getToken } = storeToRefs(store.useAccount)
    console.log("获取方式二:", token.value)
    token.value = "888888"
    console.log("修改后的token的值是:", store.useAccount.token)
    //方式三:通过gettes获取
    console.log("通过getters获取的值是:", store.useAccount.getToken)
    console.log("通过getters获取的值是:", getToken.value)

    //修改pinia数据的几种方式
    //方式一:通过store.模块名.$patch(参数) 注意传入的参数对象的字段应该包含于pinia定义的数据对象的字段中
    store.useAccount.$patch({
    token: "666666",
    })
    console.log("修改一次后token的值是:", getToken.value)

    //方式二:通过箭头函数修改
    store.useAccount.$patch(state => {
    state.token = "777777"
    })
    console.log("修改二次后token的值是:", getToken.value)

    //方式三:通过actions的方法调用
    store.useAccount.sysToken("999999")
    console.log("修改三次后token的值是:", getToken.value)

# 11.事件总线 mitt 使用

    npm i mitt -s

    使用步骤:
    1.在utils文件夹下创建mittBus.ts,编写以下代码
    import mitt, { Emitter } from 'mitt';

    // 定义类型别名，因全局使用并且需要自定义事件名称，所以使用索引签名定义内容
    type Events = {
        [propName: string]: any;
    };
    // 提供泛型参数让 emitter 能自动推断参数类型
    const mittBus: Emitter<Events> = mitt<Events>();
    export default mittBus;

    2.组件中分别引入mitt同时定义发送和监听事件的方法

    //发送事件
    //引入mitt
    import mittBus from '@/utils/mittBus';
    //使用mitt发送自定义事件
    const sendEvent = () => {
        mittBus.emit('acceptMsg', { name: '123', age: 288 });
    };

    //接受事件
    //引入mitt
    import mittBus from '@/utils/mittBus';
    onMounted(() => {
        mittBus.on('acceptMsg', (param: any) => {
            console.log(`接受到mitt发送的事件了`, param.name);
        });
    });

# 12.axios 的使用

     1:安装axios yarn add axios
     2:直接拷贝src/http文件中的所有文件到开发项目中,需要更改的只有api.ts的部分用于自定义项目中的网络请求接口
     3:main.ts的全局挂载
        //引入全局封装的api请求
        import api from '@/http/api';
        app.config.globalProperties.$api = api;
     4:页面中的使用
        //引入全局挂载变量
        const { proxy }: any = getCurrentInstance();

# 13.Ant Design Vue 的使用 官网地址:https://www.antdv.com/docs/vue/getting-started-cn

    1:安装 npm i --save ant-design-vue

    2:main.ts中引入
        //引入ant-design-vue
        import Antd from 'ant-design-vue';
        import 'ant-design-vue/dist/antd.css';

    3:定制主题

        两大前提:(1)必须先安装less依赖  npm install less --save-dev
                (2) 注意样式必须加载 less 格式，less 的样式被 css 的样式覆盖了导致自定义样式不生效。
                    如果是通过全局引入的方式import 'ant-design-vue/dist/antd.css'引入样式的，改为import 'ant-design-vue/dist/antd.less'
                    如果你是通过unplugin-vue-components 来进行按需加载，择需配置importStyle: 'less'

        方式一:直接在vite.cofig.ts中进行配置
            css: {
                preprocessorOptions: {
                    less: {
                        modifyVars: {
                            //这里修改主题颜色值
                            'primary-color': 'red',
                            'link-color': '#1DA57A',
                            'border-radius-base': '2px'
                        },
                        javascriptEnabled: true
                    }
                }
            },

        方式二:通过引入自定义的样式文件
            (1)在src/styles/下创建theme.less文件。在官网复制定义好的less变量，修改它们即可。
                //ant design vue 主题样式全局变量
                @primary-color: #c77533; // 全局主色
                @link-color: #1890ff; // 链接色
                @success-color: #52c41a; // 成功色
                @warning-color: #faad14; // 警告色
                @error-color: #f5222d; // 错误色
                @font-size-base: 14px; // 主字号
                @heading-color: rgba(0, 0, 0, 0.85); // 标题色
                @text-color: rgba(0, 0, 0, 0.65); // 主文本色
                @text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
                @disabled-color: rgba(0, 0, 0, 0.25); // 失效色
                @border-radius-base: 2px; // 组件/浮层圆角
                @border-color-base: #d9d9d9; // 边框色
                @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
            (2)在vite.config.ts中修改less插件配置。
               css: {
                        preprocessorOptions: {
                            less: {
                                modifyVars: {
                                    hack: 'true; @import "@/styles/theme.less"'
                                },
                                javascriptEnabled: true
                            }
                        }
                },

    3:使用vant-design-vue的icon图标
        (1)安装:npm install --save @ant-design/icons-vue
        (2)在main入口文件引入，不想一个个一得导入，可直接循环导入即可
            import * as Icons from '@ant-design/icons-vue';
            // 循环使用全部全部图标
            const icons: any = Icons;
            for (const i in icons) {
                // 全局注册一下组件
                app.component(i, icons[i])
            }

# 14.set up name 增强

    问题:Vue3的setup语法糖是个好东西，但使用setup语法带来的第一个问题就是无法自定义name，而我们使用keep-alive往往是需要name
    解决方法:
        1:安装插件
          npm i vite-plugin-vue-setup-extend -D
        2:配置vite.config.ts中pugins属性
            import VueSetupExtend from 'vite-plugin-vue-setup-extend'
                plugins: [
                    VueSetupExtend()
                ]

# 15.时间插件 Moment.js 使用 官网地址:http://momentjs.cn/

    1:安装插件
        npm install moment  或者  yarn add moment
    2:组件内引入
        import moment from "moment"
    3:常用方法
        moment().format('YYYY年MM月DD日  hh:mm:ss') 2023年05月22日  12:10:20

# 16.echarts 的使用 echarts 官网上没有对应的 liquidfill 水球图说明 查看文档方法 可以百度搜索 npm 官网 ,进入后搜索 liquidfill 即可 echarts 国内镜像访问地址:https://www.isqqw.com/echarts-doc/zh/option.html#legend

    1:依赖安装
        //echarts的依赖安装
        npm install echarts --save
        //水球图的依赖安装
        npm install echarts-liquidfill --save

    2:组件内引入import * as echarts from 'echarts';
    3:注意点:在使用echarts时必须给用于初始化的div指定宽高，否认不会绘制
      <div ref="water_line" class="charts"></div>
        .charts {
            width: 100%;
            height: 100%;
        }
    4:初始化echarts,必须在生命周期函数onMounted中初始化
        //引入echarts的配置项
        import { liquidfillOption } from '@/config/echarts/config';
        //初始化水球图
        let water_line = ref();
        onMounted(() => {
        let myCharts = echarts.init(water_line.value);
        //给echarts设置配置项项,项目中使用的echarts配置项已经封装在config/echats/config.ts中
        //配置数据主要是是 liquidfillOption.series[0].data
        myCharts.setOption(liquidfillOption);
        });

# 17.element-plus 的使用

    步骤一:安装
    npm install element-plus --save   //npm安装不上就使用cnpm安装

    步骤二:自动导入配置
    1:安装依赖  npm install -D unplugin-vue-components unplugin-auto-import
    2:vite配置(webpack配置看官方文档) 在vite.config.js中添加如下代码
      import AutoImport from 'unplugin-auto-import/vite'
      import Components from 'unplugin-vue-components/vite'
      import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
      plugins: [
          //elementplus按需导入配置
          AutoImport({
            resolvers: [ElementPlusResolver()],
          }),
          Components({
            resolvers: [ElementPlusResolver()],
          }),
      ],

    步骤三: 在 main.js 中引入样式表

    //引入elemtn-plus的样式表
    import ElementPlus from "element-plus"
    import 'element-plus/dist/index.css'

    步骤四: 解决 el-pagination 分页组件默认显示英文的方案

    //main.js 中添加如下
    //element-plus 使用中文
    import zhCn from "element-plus/es/locale/lang/zh-cn"
    app.use(ElementPlus, { locale: zhCn })

# 18.svg 图标的使用和封装

     1:安装依赖
        yarn add vite-plugin-svg-icons

     2:vite.config.ts中配置
        //配置全局加载svg图标为组件
        import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
        //plugins属性下配置svg图标的访问路径
        plugins:[
            createSvgIconsPlugin({
                // 指定需要缓存的图标文件夹
                iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
                // 指定symbolId格式
                symbolId: 'icon-[dir]-[name]'
            })
        ]

    3:main.ts配置
        //svg插件需要配置代码
        import 'virtual:svg-icons-register'

    4:src/assets下创建存放svg图标的文件夹,注意文件夹的名称必须与2中指定需要缓存的图标文件夹名称一致
    5:在components下创建SvgIcon文件夹,创建通用svg使用组件
    6:避坑svg 文件，打开 svg 文件，可以发现 path 标签里有一个 fill 属性，并且该 fill 属性被赋了值，所以无论如何折腾，图标的颜色始终唯一，这时候，直接干掉他或者改成 fill="#......" 都是可以的，然后保存一下即可

# 19.采用自定义插件的方式注册全局组件

    1:在components下创建index.ts,编写如下代码
    //引入需要配置的全局组件
    import SvgIcon from './SvgIcon/index.vue';

    //引入 element-plus 提供全部图标组件
    //import \* as ElementPlusIconsVue from '@element-plus/icons-vue';

    //全局对象
    const allGloablComponent: any = {
        SvgIcon
    };

    //对外暴露插件对象
    export default {
    //务必叫做 install 方法
    install(app: any) {
    Object.keys(allGloablComponent).forEach(key => {
        app.component(key, allGloablComponent[key]);
    });
    //将element-plus提供图标注册为全局组件
        //for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
          //  app.component(key, component);
           // }
        //}

    };

    2:在main.ts中引入并注册自定义插件
        //安装自定义插件的方式引入全局组件
        import gloalComponent from './components/index';
        app.use(gloalComponent);

# 20.iconfont 字体图标库的使用

svg 组件方式
1:https://www.iconfont.cn网站上选择需要的字体图标,同时创建项目
2:控制台中选择 Symbol,点击复制 js 代码
3:在项目 src/assets 下创建目录 icon 文件夹,并创建 iconfont.js 文件,将步骤 2 中复制的 js 代码进行拷贝
4:main.js 中引入步骤 3 的 iconfont.js
import "../src/assets/icon/iconfont.js";
5:在 components 下创建 svg 组件,组件代码详见 svg 文件夹下的 index.vue 文件
6:main.js 中全局注册 svg 组件
import SvgIcon from "./components/svg/index.vue";
app.component("SvgIcon", SvgIcon);
7:在页面文件中使用组件,注意这里 iconName 需要使用 iconfont 网站上 Symbol 的类名
<svg-icon size="24" iconName="icon-chanpinliebiaopubuliumoshi"></svg-icon>

# 21.elementplus 中 icon 图标使用

1: 安装 npm install @element-plus/icons-vue
2: main.js 中全局配置
//elementplus 中 icon 图标的引入
import \* as ElementPlusIconsVue from "@element-plus/icons-vue";
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}

# 22.screenfull 插件的使用,用于实现全屏和取消全屏的操作

1：安装 为防止最新版本的使用有问题，请安装 5.1.0 版本
npm install screenfull@5.1.0
2：页面使用
//页面引入全屏插件
import screenfull from "screenfull";
//切换全屏
if (screenfull.isEnabled) {
screenfull.toggle();
}

# 23.语言国际化 vue-i18n 的使用

1：安装 npm install vue-i18n@next
2：在 src 下创建 i18n 文件夹，参考项目文件夹下的进行配置，其中 EN.js 是英文语音配置，ZH.js 是中文语言配置，index.js 是创建 i18n 的文件
3：main.js 中配置 i18n
//引入自定义的 i18n
import i18n from "@/i18n/index";
app.use(i18n)
4：重点,页面中使用
插值表达式的使用:{{$t('login.title')}}

# 24.ElementPlus 自定义主题颜色

`1：在 style 文件夹下创建 element 文件夹，并在新创建文件夹下创建 index.scss 文件,具体文件内容参照项目中文件
2：在 vite.config.js 进行配置
    配置 1：
    Components({
        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    }),
    配置 2：
    css: {
        preprocessorOptions: {
        scss: {
                additionalData: `@use "@/style/common.scss";
@use "@/style/element/index.scss" as \*;`,
            },
        },
    },  `

# 25.时间插件 Moment.js 使用 官网地址:http://momentjs.cn/

    1:安装插件
        npm install moment  或者  yarn add moment
    2:组件内引入
        import moment from "moment"
    3:常用方法
        moment().format('YYYY年MM月DD日  hh:mm:ss') 2023年05月22日  12:10:20

# 26.echarts 的使用 echarts 官网上没有对应的 liquidfill 水球图说明 查看文档方法 可以百度搜索 npm 官网 ,进入后搜索 liquidfill 即可 echarts 国内镜像访问地址:https://www.isqqw.com/echarts-doc/zh/option.html#legend

    1:依赖安装
        //echarts的依赖安装
        npm install echarts --save
        //水球图的依赖安装
        npm install echarts-liquidfill --save

    2:组件内引入import * as echarts from 'echarts';
    3:注意点:在使用echarts时必须给用于初始化的div指定宽高，否认不会绘制
      <div ref="water_line" class="charts"></div>
        .charts {
            width: 100%;
            height: 100%;
        }
    4:初始化echarts,必须在生命周期函数onMounted中初始化
        //引入echarts的配置项
        import { liquidfillOption } from '@/config/echarts/config';
        //初始化水球图
        let water_line = ref();
        onMounted(() => {
        let myCharts = echarts.init(water_line.value);
        //给echarts设置配置项项,项目中使用的echarts配置项已经封装在config/echats/config.ts中
        //配置数据主要是是 liquidfillOption.series[0].data
        myCharts.setOption(liquidfillOption);
        });

# 27.自定义 UI 组件库

    1:在src目录下创建libs(名字自定义)文件夹,在libs文件下创建zw-ui(名字自定义)文件夹,该文件夹用于存放各种自定义UI组件
    2:在libs文件夹下创建index.js文件,内容是导入各种自定义组件,并通过install方式进行Vue的全局组件注册,具体内容可以参考文件内容
    3:在main.js中引入自定义UI组件库,并通过use()进行使用,参考代码如下:
        //引入自定义UI组件
        import CustomUI from "./libs/zw-ui";
        app.use(CustomUI)