@ly-js/automatic/README.md

automatic of vue

# `@ly-js/automatic`

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

## Install

#### NPM

```shell
npm i @ly-js/automatic --save
```

#### YARN

```shell
yarn add @ly-js/automatic
```

#### pnpm

```shell
pnpm add @ly-js/automatic
```

## Usage

#### 使用方式

##### `pages.josn`

```json
{
  "$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`

```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
  }
}
```

```javascript
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)
```