@deepexi-devops/bcg
v1.5.0
Published
Generate page and breadcrumb configuration
Downloads
10
Readme
breadcrumb-generator
配合 @femessage/create-nuxt-app 使用的面包屑工具,快速生成页面与配置面包屑数据
目录
安装
yarn global add @deepexi-devops/bcg
# or
npm install --global @deepexi-devops/bcg
命令与选项
init
初始化面包屑,将会生成面包屑相关文件,包括面包屑组件、json配置文件、vuex相关文件、plugin相关文件
new
生成页面并配置面包屑数据,默认基础路径为 src/pages,可通过 -b 选项修改
# 生成 src/pages/app/detail.vue
bcg new app/detail.vue
# or
bcg new app/detail
# 生成 src/views/app/detail.vue
bcg new app/detail.vue -b src/views
# or
bcg new app/detail -b src/views
配置说明
[{
"clickable": false, // 是否可点击跳转
"isShow": true, // 该路径下是否显示面包屑
"isCurrentShow": true, // 该路径下是否当前层级面包屑
"name": "应用", // 显示的面包屑名称
"path": "/app" // 路径
}]
例子
首先使用 @femessage/create-nuxt-app 生成一个 nuxt 项目
第一步:初始化,生成相关文件
可以看到文件已经生成了
第二步:配置 plugin
第三步:在 layout 引入面包屑组件
第四步:生成一个页面
可以看到页面与配置已经生成了
第五步:启动项目,打开 /app/detail/my-app 查看效果
动态面包屑
有时候需要动态设置面包屑数据(比如使用动态路由时)
由于面包屑数据是通过 vuex 管理的,所以动态设置也是非常方便,仅需调用设置面包屑数据的 mutation 设置相应数据即可
- 修改某个面包屑显示名称
假设有一个参数为 type 的动态路由,我们生成这个页面,并且设置面包屑名称为 "动态_类型"
在刚刚生成的 _type.vue 中动态设置这个名称
查看效果
- 修改整个面包屑数组
我们也可以动态修改整个面包屑数组
这么做的话有一点需要注意:就是要将原数据复制一份进行修改,否则就变成直接修改 state 了,将会报 vuex 相关错误
查看效果
Contributors
Thanks goes to these wonderful people (emoji key):