tools-vue3/README.md

vue3 tools

# vue3 工具

## CRouter 复杂示例

```javascript
import System from '@/utils/System'
import { createRouter, createWebHashHistory } from 'vue-router'
import CRouter from './CRouter'

/**
 * 默认主题
 */
const themeList = ['light', 'dark'] as any[]
const defaultTheme = 'light' as any
const diffTheme = 'dark' as any

/**
 * 路由目录/src/views/light/home/index.vue、/src/views/dark/home/index.vue
 */
export const initRouter = () => {
  let _modules = import.meta.glob([
    '@/views/**/*.vue',
    '!@/views/**/*-com/**/*.vue',
    '!@/views/**/com/**/*.vue',
    '!@/views/**/components/**/*.vue'
  ])

  const _defaultModules = {} as any
  const _diffModules = {} as any
  Object.keys(_modules).forEach((key) => {
    themeList.forEach((item) => {
      if (defaultTheme != item) {
        if (!new RegExp(`^/src/views/${item}`).test(key)) {
          _defaultModules[key] = _modules[key]
        }
        if (diffTheme != defaultTheme && new RegExp(`^/src/views/${diffTheme}`).test(key)) {
          _diffModules[key] = _modules[key]
        }
      }
    })
  })

  const pathHook = (path: string) => {
    return path
      .replace(/\/index$/, '')
      .replace(new RegExp(`/${defaultTheme}/`), '/')
      .replace(new RegExp(`/${diffTheme}/`), '/')
  }

  const _routes = CRouter.init({
    modules: _defaultModules,
    diffModules: _diffModules,

    children: [
      {
        path: '/layout',
        component: '/layout',
        childrenReg: ['^/pages']
      }
    ],
    setInfoHook(item) {
      item.meta = {
        title: item.path
      }
    },
    mapKeyPathHook(path) {
      return pathHook(path)
    },
    pathHook(path) {
      return pathHook(path).replace(/^\/pages/, '')
    }
  })

  const router = createRouter({
    history: createWebHashHistory(),
    routes: [
      ..._routes.array,
      {
        path: '/',
        redirect: '/home'
      }
    ]
  })

  System.router = router

  return router
}
```