feat: tools工具函数和自动生成路由

src/router/modules/demo.ts

@@ -1,5 +1,33 @@
 const Layout = () => import('@/layout/index.vue');
 
+// @/views/demo/**/*.vue
+/**
+ * (使用 ** 表示递归查找)
+ * 递归匹配views/demo目录下所有.vue文件
+ * 也包含/demo/jsx/components/index.vue 这种某个页面的子组件
+ */
+
+// @/views/demo/*.vue       第一层目录
+// @/views/demo/*/*.vue     第二层目录
+/**
+ * 第一层目录 => 匹配views/demo目录下所有.vue文件(第一层)
+ * 例如 /views/demo/index.vue
+ *
+ * 第二层目录 => 匹配views/demo目录下所有文件夹下的.vue文件(第二层)
+ * 例如 /views/demo/jsx/index.vue
+ *
+ * 不会匹配/views/demo/jsx/components/index.vue 这种某个页面的子组件
+ */
+
+const firstLevelComponents = import.meta.glob('@/views/demo/*.vue');
+const secondLevelComponents = import.meta.glob('@/views/demo/*/*.vue');
+const components = { ...firstLevelComponents, ...secondLevelComponents };
+console.log(components);
+const demoRoutes = Object.keys(components).map((path) => {
+    console.log(path);
+    const component = components[path];
+});
+
 export default {
     path: '/demo',
     name: 'Demo',
@@ -13,7 +41,7 @@ export default {
     children: [
         {
             path: '/demo/jsx',
-            name: 'Jsx',
+            name: 'DemoJsx',
             component: () => import('@/views/demo/jsx/index.vue'),
             meta: {
                 title: '使用jsx',

src/utils/tools.ts

@@ -0,0 +1,18 @@
+/** url地址相关工具 */
+export const url = {
+    /**
+     * 将对象转换为url参数形式，支持忽略指定字段
+     * @param obj { x: 1, y: 2, z: 3 }
+     * @param ignoreFields ['z']
+     * @returns x=1&y=2
+     */
+    objToUrlParma: (obj: Record<string, any>, ignoreFields: Array<string> = []): string => {
+        return (
+            '?' +
+            Object.keys(obj)
+                .filter((key) => ignoreFields.indexOf(key) === -1)
+                .map((key) => `${key}=${obj[key]}`)
+                .join('&')
+        );
+    },
+};

src/views/demo/jsx/index.vue

@@ -38,7 +38,7 @@ import styles from './jsx.module.scss';
  * 4. jsx在template中怎么写才能渲染
  */
 defineOptions({
-    name: 'Jsx',
+    name: 'DemoJsx',
 });
 
 const refs = ref({});

src/views/demo/tools/components/cmp.vue

@@ -0,0 +1,15 @@
+<template>
+    <el-card> 基础模版 </el-card>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+
+defineOptions({
+    name: 'DemoTools',
+});
+
+const page = ref({});
+</script>
+
+<style lang="scss" scoped></style>

src/views/demo/tools/index.vue

@@ -0,0 +1,15 @@
+<template>
+    <el-card> 基础模版 </el-card>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+
+defineOptions({
+    name: 'DemoTools',
+});
+
+const page = ref({});
+</script>
+
+<style lang="scss" scoped></style>