Bread Crumb Menu 👋
安装
npm install bcm -g// ORyarn global add bcm
使用
bcm init // 初始化面包屑组件bcm new // 新增页面文件bcm show // 显示面包屑的配置
在需要渲染面包屑的地方引入组件
init 命令使用说明
执行 init 命令会将组件文件以及 json 文件复制到 src/components/breadcrumb
目录,此时的 json 文件内容为
new 命令使用说明
在使用 new 命令时,会问 4 个问题
- 存放目录,即为新建的目录或页面的存放位置
- 目录名,即为新增页面所在的目录,不填则直接在存放目录里,也可以输入多级目录,如
aaa/bbb
- 文件名, 即为页面的文件名称
- 中文名,为面包屑上显示的中文文字
例子
安装 bcm
yarn global add bcm
使用 @vue/cli
创建一个新的 Vue
项目
vue create my-vue-project
选择 vue-router
运行初始化命令
bcm init
在 App.vue
中引入组件
运行项目,此时页面上的面包屑渲染为
新增业务页面
bcm show
此时 dp-bread-crumb.json
为
在 router.js
新增路由配置
path: '/productt' component: Product path: '/product/detail' component: Detail path: '/product/detail/new' component: New
面包屑渲染为
Contributing
- Fork it (https://github.com/xrr2016/bread-crumb-menu.git)
- Create your feature branch (
git checkout -b feat/fooBar
) - Commit your changes (
git commit -am 'Add some fooBar'
) - Push to the branch (
git push origin feature/fooBar
) - Create a new Pull Request
License
Show your support
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator