Bunny-Cli/vite_ts_auto
Bunny-Cli
/
vite_ts_auto
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 🧩 路由生成无法深拷贝

This commit is contained in:
bunny 2024-05-09 14:55:40 +08:00
parent 45e2dc6cd5
commit 1248d83ab5
17 changed files with 127 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
.eslintrc.js
View File

@ -5,22 +5,22 @@ module.exports= {
env: {
browser: true,
node: true,
es6: true
es6: true,
},
/* 指定如何解析语法 */
parser: "vue-eslint-parser",
parser: 'vue-eslint-parser',
/* 优先级低于 parse 的语法解析配置 */
parserOptions: {
parser: "@typescript-eslint/parser",
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: "module",
jsxPragma: "React",
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true
}
jsx: true,
},
},
/* 继承某些已有的规则 */
extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "prettier", "plugin:prettier/recommended"],
extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:prettier/recommended'],
/*
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
@ -28,41 +28,42 @@ module.exports= {
*/
rules: {
// eslint (http://eslint.cn/docs/rules)
"no-var": "error", // 要求使用 let 或 const 而不是 var
"no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
"no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
"prefer-const": "off", // 此规则旨在标记使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
"no-irregular-whitespace": "off", // 禁止不规则的空白
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['error', { max: 1 }], // 不允许多个空行
'no-use-before-define': 'off', // 禁止在 函数/类/变量 定义之前使用它们
'prefer-const': 'off', // 此规则旨在标记使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
'no-irregular-whitespace': 'off', // 禁止不规则的空白
// typeScript (https://typescript-eslint.io/rules)
"@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量
"@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
"@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长
"@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间。
"@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
"@typescript-eslint/ban-types": "off", // 禁止使用特定类型
"@typescript-eslint/explicit-function-return-type": "off", // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明
"@typescript-eslint/no-var-requires": "off", // 不允许在 import 语句中使用 require 语句
"@typescript-eslint/no-empty-function": "off", // 禁止空函数
"@typescript-eslint/no-use-before-define": "off", // 禁止在变量定义之前使用它们
"@typescript-eslint/ban-ts-comment": "off", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
"@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)
"@typescript-eslint/explicit-module-boundary-types": "off", // 要求导出函数和类的公共类方法的显式返回和参数类型
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-inferrable-types': 'off', // 可以轻松推断的显式类型可能会增加不必要的冗长
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/ban-types': 'off', // 禁止使用特定类型
'@typescript-eslint/explicit-function-return-type': 'off', // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明
'@typescript-eslint/no-var-requires': 'off', // 不允许在 import 语句中使用 require 语句
'@typescript-eslint/no-empty-function': 'off', // 禁止空函数
'@typescript-eslint/no-use-before-define': 'off', // 禁止在变量定义之前使用它们
'@typescript-eslint/ban-ts-comment': 'off', // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
'@typescript-eslint/no-non-null-assertion': 'off', // 不允许使用后缀运算符的非空断言(!)
'@typescript-eslint/explicit-module-boundary-types': 'off', // 要求导出函数和类的公共类方法的显式返回和参数类型
'@typescript-eslint/no-unused-vars': 'off',
// vue (https://eslint.vuejs.org/rules)
"vue/no-v-html": "off", // 禁止使用 v-html
"vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该no-unused-vars规则时有效。
"vue/v-slot-style": "error", // 强制执行 v-slot 指令样式
"vue/no-mutating-props": "off", // 不允许组件 prop的改变
"vue/custom-event-name-casing": "off", // 为自定义事件名称强制使用特定大小写
"vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序
"vue/one-component-per-file": "off", // 强制每个组件都应该在自己的文件中
"vue/html-closing-bracket-newline": "off", // 在标签的右括号之前要求或禁止换行
"vue/max-attributes-per-line": "off", // 强制每行的最大属性数
"vue/multiline-html-element-content-newline": "off", // 在多行元素的内容之前和之后需要换行符
"vue/singleline-html-element-content-newline": "off", // 在单行元素的内容之前和之后需要换行符
"vue/attribute-hyphenation": "off", // 对模板中的自定义组件强制执行属性命名样式
"vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值
"vue/multi-word-component-names": "off" // 要求组件名称始终为 “-” 链接的单词
}
'vue/no-v-html': 'off', // 禁止使用 v-html
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该no-unused-vars规则时有效。
'vue/v-slot-style': 'error', // 强制执行 v-slot 指令样式
'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
'vue/custom-event-name-casing': 'off', // 为自定义事件名称强制使用特定大小写
'vue/attributes-order': 'off', // vue api使用顺序，强制执行属性顺序
'vue/one-component-per-file': 'off', // 强制每个组件都应该在自己的文件中
'vue/html-closing-bracket-newline': 'off', // 在标签的右括号之前要求或禁止换行
'vue/max-attributes-per-line': 'off', // 强制每行的最大属性数
'vue/multiline-html-element-content-newline': 'off', // 在多行元素的内容之前和之后需要换行符
'vue/singleline-html-element-content-newline': 'off', // 在单行元素的内容之前和之后需要换行符
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
'vue/require-default-prop': 'off', // 此规则要求为每个 prop 为必填时，必须提供默认值
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
},
};

4
package-lock.json generated
View File

@ -17,6 +17,7 @@
"dotenv": "^16.4.5",
"echarts": "^5.5.0",
"loadsh": "^0.0.4",
"lodash": "^4.17.21",
"mitt": "^3.0.1",
"moment": "^2.30.1",
"pinia": "^2.1.7",
@ -10469,8 +10470,7 @@
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash.camelcase": {
"version": "4.3.0",

1
package.json
View File

@ -29,6 +29,7 @@
"dotenv": "^16.4.5",
"echarts": "^5.5.0",
"loadsh": "^0.0.4",
"lodash": "^4.17.21",
"mitt": "^3.0.1",
"moment": "^2.30.1",
"pinia": "^2.1.7",

7
src/router/index.ts
View File

@ -1,9 +1,6 @@
import { statisticRoutes } from '@/router/module/statisticRoutes';
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
/**
* * 当需要定死路由时
* import { pageRoutes } from './module/pageRoutes';
*/
import { pageRoutes } from './module/pageRoutes';
/**
* * 如果需要打包成app，则要将路由改为Hash路由，createWebHashHistory
@ -14,7 +11,7 @@ const router = createRouter({
process.env.NODE_ENV === 'production'
? createWebHashHistory(import.meta.env.BASE_URL)
: createWebHistory(import.meta.env.BASE_URL),
routes: [/* ...pageRoutes, */ ...statisticRoutes],
routes: [...pageRoutes, ...statisticRoutes],
});
export default router;

48
src/router/module/pageRoutes.ts
View File

@ -1,6 +1,6 @@
import { routeFilenameHelper } from '@/utils/file/routeFileUtil';
import _ from 'lodash';
import { RouteRecordRaw } from 'vue-router';
import router from '..';
// * 最终路由
const routeMap: Record<string, RouteRecordRaw> = {};
@ -11,6 +11,32 @@ const contexts = [
{ context: import.meta.glob('@/views/**/page.ts', { eager: true, import: 'default' }), isIndex: false },
];
/**
* 构建路由信息
* @param context 上下文信息
* @param isIndex 是否第一次遍历
* @param route 路由内容
*/
function buildRouteTree(context: any, isIndex: boolean, route: any) {
// 遍历当前子路由
Object.entries(context).forEach(([filePath, _]) => {
// 获取子路由下所有文件对象格式
const childrenFileInfo = routeFilenameHelper(filePath);
// 组装子路由对象
const childrenRoute: any = {
name: childrenFileInfo?.name,
path: childrenFileInfo!.path,
component: isIndex ? () => import(/* @vite-ignore */ `@/views${childrenFileInfo?.replaceName}`) : undefined,
children: [],
meta: { isFullScreen: false },
};
// 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中
if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) {
route.children.push(childrenRoute);
}
});
}
/**
* 遍历路由信息
* @param context 路由上下文
@ -24,15 +50,21 @@ const createRouteList = (context: any, isIndex: boolean) => {
name: fileInfo?.name,
path: fileInfo!.path,
component: isIndex ? () => import(/* @vite-ignore */ fileInfo!.filePath, {}) : undefined,
children: [],
meta: { isFullScreen: false },
};
// 初始化赋值
if (isIndex) {
routeMap[route.path] = route;
buildRouteTree(context, isIndex, route);
} else {
// 导出当前存在的路由并重新赋值
const existingRoute = routeMap[route.path];
// 当前路由存在
if (existingRoute) {
routeMap[route.path] = { ...existingRoute, ...(exportRouteConfig as any) };
// 使用loadsh合并对象
routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
}
}
});
@ -41,14 +73,4 @@ const createRouteList = (context: any, isIndex: boolean) => {
// * 生成路由信息
contexts.forEach(({ context, isIndex }) => createRouteList(context, isIndex));
export const pageRoutes: Array<RouteRecordRaw> = [...Object.values(routeMap)];
/**
* * 示例代码
* 如果需要动态路由或者其它路由
* 可以将路由遍历之后使用
*/
pageRoutes.forEach((item, index) => {
// ? router.addRoute('路由的那么', 需要添加路由的值)
index & 1 ? router.addRoute('layout', item) : router.addRoute(item);
});
export const pageRoutes: Array<RouteRecordRaw> = Object.values(routeMap);

16
src/utils/file/routeFileUtil.ts
View File

@ -4,22 +4,24 @@
* @param replaceValue 替换
* @returns 文件转换对象
*/
export const routeFilenameHelper = (filePath: string) => {
export const routeFilenameHelper = (filePath: string, replaceValue = '') => {
// 匹配文件列表
const fileMatchList = filePath.match(/\/([^/]+)$/);
// 列表不为空
if (fileMatchList !== null) {
// 文件+扩展名
const fileExtension = fileMatchList[1];
const [_, fileWithExtension] = fileMatchList;
// 文件名
const filename = fileMatchList[1].replace(/\.\w+$/g, '');
const filename = fileWithExtension.replace(/\.\w+$/, '');
// 路径名带文件名
const fullPath = `/${filePath.replace(/\/src\/views\/|(\.\w+)?$/g, '')}`;
const fullPath = `/${filePath.replace(/^\/src\/views\/|(\.\w+)?$/g, '')}`;
// 路径下划线名
const name = fullPath.replace(/\/(index|page)|^\//g, '').replace(/\//g, '_');
// 路径名不带文件名
const path = fullPath.replace(/\/[^/]*$/, '');
return { fileExtension, filename, name, fullPath, path, filePath };
// 替换后的名字
const replaceName = filePath.replace(/\.\//, replaceValue);
return { fileWithExtension, filename, name, fullPath, path, filePath, replaceName };
}
};

4
src/views/bunny/default/My.vue Normal file
View File

@ -0,0 +1,4 @@
<template>sdasd</template>
<script setup lang="ts"></script>
<style scoped lang="scss"></style>

1
src/views/bunny/default/Myy.vue
View File

@ -1 +0,0 @@
<template>sdasd</template>

2
src/views/bunny/default/page.ts
View File

@ -2,5 +2,5 @@ export default {
meta: {
title: '',
},
aaa: 'aaa',
name: 'aaa',
};

3
src/views/bunny/my/a/aChildren.vue Normal file
View File

@ -0,0 +1,3 @@
<template>aChildren.vue</template>
<script setup lang="ts"></script>
<style scoped lang="scss"></style>

3
src/views/bunny/my/a/b/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>B的路由</template>
<script setup lang="ts"></script>
<style scoped lang="scss"></style>

10
src/views/bunny/my/a/index.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
A的路由45465456456
<AChildren />
<RouterView />
</template>
<script setup lang="ts">
import AChildren from './aChildren.vue';
</script>
<style scoped lang="scss"></style>

2
src/views/bunny/my/index.vue
View File

@ -1,6 +1,6 @@
<template>
<h1>bunny/my 页面</h1>
<RouterView />
<h1>bunny/my 页面</h1>
</template>
<script setup lang="ts"></script>

10
src/views/bunny/my/page.ts Normal file
View File

@ -0,0 +1,10 @@
const route = {
meta: { isFullScreen: true },
children: [
{ name: 'bunny_my_a', path: '/bunny/my/a', component: () => import('@/views/bunny/www/index.vue') },
{ name: 'bunny_my_a111', path: '/bunny/my/a/children', component: () => import('@/views/bunny/my/a/aChildren.vue') },
{ name: 'bunny_my_a_b', path: '/bunny/my/a/b', component: () => import('@/views/bunny/my/a/b/index.vue') },
],
};
export default route;

0
src/views/home/common/about/page.ts → src/views/home/common/about/page.js
View File

2
src/views/layout.vue
View File

@ -1,5 +1,5 @@
<template>
<h1>vue-pinia 模板</h1>
<h1>vite-pinia 模板</h1>
<h1>成功</h1>
<ul>
<li v-for="(route, index) in pageRoutes" :key="index">

2
src/vite-env.d.ts vendored
View File

@ -12,3 +12,5 @@ declare module '*.vue' {
const component: DefineComponent<{}, {}, any>;
export default component;
}
declare module 'lodash';