Nucleic Photon Magnetizer

    @ly-js/automatic
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    @ly-js/automatic

    @ly-js/automatic 是一个 基于 vite 自动处理的工具库,目前支持路由自动加载,并兼容webpack

    Install

    NPM

    npm i @ly-js/automatic --save

    YARN

    yarn add @ly-js/automatic

    pnpm

    pnpm add @ly-js/automatic

    Usage

    使用方式

    pages.josn
    {
      "$schema": "https://www.unpkg.com/@ly-js/automatic/schema/pages.json",
      "pages": [
        {
          "component": "views/system/position/index",
          "name": "PositionManage",
          "path": "/system/position-manage",
          "meta": {
            "keepAlive": true
          }
        },
        {
          "component": "views/system/position/detail",
          "name": "PositionDetail",
          "path": "/system/position/:id",
          "meta": {
            "hidden": true,
            "activeMenu": "PositionManage"
          }
        }
      ],
      "nestedRoutes": [
        {
          "component": "views/layout/index",
          "path": "/",
          "name": "Layout",
          "redirect": "/dashboard",
          "meta": {
            "title": "概述"
          },
          "include": ["views/dashboard"],
          "exclude": []
        },
        {
          "component": "views/layout/index",
          "path": "/system",
          "name": "System",
          "redirect": "noRedirect",
          "meta": {
            "title": "系统管理"
          },
          "include": ["views/system"],
          "exclude": []
        }
      ],
      "exclude": ["components", "component", "views/error-page", "views/login"]
    }
    page.json
    {
      "$schema": "https://www.unpkg.com/@ly-js/automatic/schema/page.json",
      "name": "RoleManage",
      "path": "/system/role-manage",
      "meta": {
        "title": "角色管理",
        "keepAlive": true
      }
    }
    {
      "$schema": "https://www.unpkg.com/@ly-js/automatic/schema/page.json",
      "name": "RoleDetail",
      "path": "/system/role/:id",
      "meta": {
        "title": "角色详情",
        "activeMenu": "RoleManage",
        "hidden": true
      }
    }
    import { AutoRouter } from '@ly-js/automatic'
    
    // 基础路由
    const constantRoutes = []
    const router = createRouter({
      history: createWebHistory(import.meta.env.BASE_URL),
      routes: constantRoutes
    })
    
    const modules = import.meta.glob(`../views/**/*.(vue|json)`)
    
    // pages 参考上叙json实例
    const autoRouter = new AutoRouter(pages, modules, {
      basePath: '../views/',
      baseMenuPath: 'views/',
      router,
      lastComponent: [notFindComponent],
      page: {
        indexFileName: 'index',
        detailFileName: 'detail',
        detailParamKey: 'id'
      }
    })
    await autoRouter.init()
    // 开启默认路由加载
    // 默认开启初始化路由
    autoRouter.initRouter()
    // 默认路由添加
    autoRouter.changeInitializeRoutes()
    // 可以自行查看改对象
    console.log(autoRouter)
    
    // 动态化菜单路由
    const treeMenus = [] // 这个类型可以查看typescript定义
    const [asyncRoutes, mergeTreeMenus] = autoRouter.getRoutesByMenu(treeMenus)
    // 切换动态路由
    autoRouter.changeRouter(asyncRoutes)
    // mergeTreeMenus 这个为完善后的树形菜单数据
    console.log(mergeTreeMenus)

    Keywords

    Install

    npm i @ly-js/automatic

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    ISC

    Unpacked Size

    471 kB

    Total Files

    13

    Last publish

    Collaborators

    • lardliyi