@deepexi-devops/bcg

breadcrumb-generator

配合 @femessage/create-nuxt-app 使用的面包屑工具，快速生成页面与配置面包屑数据

目录

• 安装
• 命令与选项
• 配置说明
• 例子
• 动态面包屑

安装

yarn global add @deepexi-devops/bcg
# or
npm install --global @deepexi-devops/bcg

⬆ Back to Top

命令与选项

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

⬆ Back to Top

配置说明

  [{
    "clickable": false, // 是否可点击跳转
    "isShow": true, // 该路径下是否显示面包屑
    "isCurrentShow": true, // 该路径下是否当前层级面包屑
    "name": "应用", // 显示的面包屑名称
    "path": "/app" // 路径
  }]

例子

首先使用 @femessage/create-nuxt-app 生成一个 nuxt 项目

第一步：初始化，生成相关文件

可以看到文件已经生成了

第二步：配置 plugin

第三步：在 layout 引入面包屑组件

第四步：生成一个页面

可以看到页面与配置已经生成了

第五步：启动项目，打开 /app/detail/my-app 查看效果

⬆ Back to Top

动态面包屑

有时候需要动态设置面包屑数据（比如使用动态路由时）

由于面包屑数据是通过 vuex 管理的，所以动态设置也是非常方便，仅需调用设置面包屑数据的 mutation 设置相应数据即可

• 修改某个面包屑显示名称

假设有一个参数为 type 的动态路由，我们生成这个页面，并且设置面包屑名称为 "动态_类型"

在刚刚生成的 _type.vue 中动态设置这个名称

查看效果

• 修改整个面包屑数组

我们也可以动态修改整个面包屑数组

这么做的话有一点需要注意：就是要将原数据复制一份进行修改，否则就变成直接修改 state 了，将会报 vuex 相关错误

查看效果

⬆ Back to Top

Contributors

Thanks goes to these wonderful people (emoji key):

OuZuYu

wuyanping