0.3.1 • Published 4 years ago
vue-cli-plugin-primary v0.3.1
vue-cli-plugin-primary
目前这个插件依赖的 vue-cli 4.5x,路由版本为最新的 vue-router 4.x, 仅支持 vue ^3.0.0
按照官方 vue-cli-plugin 的规范,实现路由配置的自动生成,具体规则请看使用说明
【Feature 功能】
- 支持传入约定路由的根路径与解析规则
- 动态路由
- 忽略路由
- 扩展路由属性
meta
- 支持不同的全局
layout
- 根据路由生成
menuTree
层级目录
0. 安装
yarn add vue-cli-plugin-primary
# or
npm i vue-cli-plugin-primary
调用插件
vue invoke vue-cli-plugin-primary
1. 配置参数
在 vue.config.js
中增加对应差距的配置 pluginOptions.routes
module.exports = {
// 以下配置均为默认值,如果不写也能正常使用
pluginOptions: {
primary: {
// 书写 vue 路由页面的文件夹,也支持 Glob 形式的字符串:https://www.npmjs.com/package/glob
routeMatchPath: 'views',
// 路由配置文件生成的后存在的地址
fileSavePath: './src/router/route.config.js',
// 是否需要按照层级关系生成目录,如果此项为 true,则需要在 vue 文件显示申明 order (1-2-1)
generateMenu: false,
// 以字符串的形式,英文逗号分隔;过滤这些文件夹下的文件
excludeFolder: 'api, hooks, components, utils, services'
}
}
}
2. 配置命令
在 package.js
中,增加一条命令
为保证开发和构建时,忘记生成新的路由,建议
dev
和build
命令一并修改
"scripts": {
"build": "vue-cli-service primary && vue-cli-service build",
"dev": "vue-cli-service primary && vue-cli-service serve",
"primary": "vue-cli-service primary"
},
3. 使用说明
约定式路由也叫文件路由,就是不需要手写配置,文件系统即路由,通过目录和文件及其命名分析出路由配置。UmiJS
命令执行成果之后, 会在src/router
下生成 route.config.js 文件, 会分析 src/views
目录拿到路由配置。
需要注意的是,只有满足以下规则的文件才会被注册为路由,
- 以
viwes
文件下的任意文的 *.vue 文件 api、hooks、services、components
文件下的任何文件都会被忽略- 暂不支持以
.ts
或.js
结尾的文件
举一个的例子,比如以下文件结构: 也可参考此项目
.
└── views
└── user
├── api
├── components
├── hooks
└── pages
├── info.vue
└── list.vue
└── home.vue
└── login.vue
会生成路由配置,
[
{ path: '/user/pages/info', component: '@/views/user/pages/info' },
{ path: '/user/pages/list', component: '@/views/user/pages/list' },
{ path: '/home', component: '@/views/home' },
{ path: '/login', component: '@/views/login' }
];
动态路由
约定 []
包裹的文件或文件夹为动态路由。
比如:
src/views/user/pages/[id].vue
会成为/user/pages/:id
src/views/user/pages/[id]/settings.vue
会成为/user/pages/:id/settings
动态可选路由
约定 [ $]
包裹的文件或文件夹为动态可选路由。
比如:
src/views/user/pages/[id$].vue
会成为/user/pages/:id?
src/views/user/pages/[id$]/settings.vue
会成为/user/pages/:id?/settings
4. 配置 name 和 meta
// biz-officer/pages/officer-category.vue
export default {
name: 'officerCategory',
// meta 信息目前支持 string,boolean, number,array 类型, 且 array 的元素只支持基础类型
meta: {
title: '首页',
hide: true,
order: '1-2-1',
roles: [11, 2, 30]
}
}
举一个 views
下的完整的例子,
.
├── biz-officer
│ ├── api
│ │ └── index.js
│ ├── components
│ │ └── CardList
│ │ └── index.vue
│ ├── hooks
│ │ └── useOfficerRepositories.js
│ └── pages
│ └── officer-category
│ └── index.vue
├── dashboard.vue
├── login.vue
└── product
└── pages
├── [product-price$]
│ └── index.vue
├── [product-setting]
│ ├── coupon.vue
│ └── ship.vue
├── product-category
│ └── [index].vue
└── product-list
└── [index$].vue
会生成路由配置,
export default [
{
path: "/biz-officer/pages/officer-category/",
component: () => import('@/views/biz-officer/pages/officer-category'),
meta: {
title: "首页",
number: 1,
hide: true
},
name: "OfficerCategory"
},
{
path: "/dashboard",
component: () => import('@/views/dashboard'),
name: "Dashboard"
},
{
path: "/login",
component: () => import('@/views/login'),
name: "Login"
},
{
path: "/product/pages/:product-price?/",
component: () => import('@/views/product/pages/[product-price$]')
},
{
path: "/product/pages/:product-setting/coupon",
component: () => import('@/views/product/pages/[product-setting]/coupon'),
name: "coupon"
},
{
path: "/product/pages/:product-setting/ship",
component: () => import('@/views/product/pages/[product-setting]/ship'),
name: "ship"
},
{
path: "/product/pages/product-category/:",
component: () => import('@/views/product/pages/product-category/[index]')
},
{
path: "/product/pages/product-list/:index?",
component: () => import('@/views/product/pages/product-list/[index$]'),
name: "[index$].vue"
}
];