公司项目的面包屑导航是使用 element 的面包屑组件，配合一份 json 配置文件来实现的，每次写新页面都需要去写 json 配置，非常麻烦，所以写一个面包屑cli，自动生成页面、自动配置面包屑数据，提高效率:rocket:
明确目标
- 提供 init 命令，在一个新项目中能够通过初始化生成面包屑相关文件
- 能够通过命令生成页面，并且自动配置面包屑 json 数据
- 按照项目原有需求，能够配置面包屑是否可点击跳转
- 按照项目原有需求，能够配置某路径下是否展示面包屑
- 支持仅配置而不生成文件，能够为已存在的页面生成配置
- 能够动态配置当前面包屑导航的数据
- …… （后续在使用中发现问题并优化）
实现分成两部分
- 面包屑实现
- cli 命令实现
面包屑实现
- 在路由前置守卫 beforeach 中根据当前路径在配置文件中匹配到相应的数据
- 把这些配置存到 vuex
- 在面包屑组件中根据 vuex 中的数据 v-for 循环渲染出面包屑
json 配置文件
json 配置文件是通过命令生成的，一个配置对象包含 name path clickable isshow 属性
[
{
"name": "应用", // 面包屑名称（在命令交互中输入）
"path": "/app", // 面包屑对应路径（根据文件自动生成）
"clickable": true, // 是否可点击跳转
"isshow": true // 是否显示
},
{
"name": "应用详情",
"path": "/app/detail",
"clickable": true, // 是否可点击跳转
"isshow": true // 是否显示
}
]
匹配配置文件中的数据
比如按照上面的配置文件，进入 /app/detail 时，将会匹配到如下数据
[
{
"name": "应用",
"path": "/app",
"clickable": true,
"isshow": true
}，
{
"name": "应用",
"path": "/app/detail",
"clickable": true,
"isshow": true
}
]
动态面包屑实现
有时候需要动态修改面包屑数据（比如动态路由），由于数据是存在 vuex 中的，所以修改起来非常方便，只需在 vuex 相关文件中提供 mutation 即可，这些 mutation 在数据中寻找相应的项，并改掉
export const state = () => ({
breadcrumbdata: []
})
export const mutations = {
setbreadcrumb (state, breadcrumbdata) {
state.breadcrumbdata = breadcrumbdata
},
setbreadcrumbbyname (state, {oldname, newname}) {
let curbreadcrumb = state.breadcrumbdata.find(breadcrumb => breadcrumb.name === oldname)
curbreadcrumb && (curbreadcrumb.name = newname)
},
setbreadcrumbbypath (state, {path, name}) {
let curbreadcrumb = state.breadcrumbdata.find(
breadcrumb => breadcrumb.path === path
)
curbreadcrumb && (curbreadcrumb.name = name)
}
}
根据路径匹配相应配置数据具体代码
import breadcrumbs from '@/components/breadcrumb/breadcrumb.config.json'
function path2arr(path) {
return path.split('/').filter(p => p)
}
function matchbreadcrumbdata (matchpath) {
return path2arr(matchpath)
.map(path => {
path = path.replace(/^:([^:?]+)(\?)?$/, (match, $1) => {
return `_${$1}`
})
return '/' + path
})
.map((path, index, paths) => {
// 第 0 个不需拼接
if (index) {
let result = ''
for (let i = 0; i <= index; i++) {
result += paths[i]
}
return result
}
return path
})
.map(path => {
const item = breadcrumbs.find(bread => bread.path === path)
if (item) {
return item
}
return {
name: path.split('/').pop(),
path,
clickable: false,
isshow: true
}
})
}
export default ({ app, store }) => {
app.router.beforeeach((to, from, next) => {
const topatharr = path2arr(to.path)
const topatharrlength = topatharr.length
let matchpath = ''
// 从 matched 中找出当前路径的路由配置
for (let match of to.matched) {
const matchpatharr = path2arr(match.path)
if (matchpatharr.length === topatharrlength) {
matchpath = match.path
break
}
}
const breadcrumbdata = matchbreadcrumbdata(matchpath)
store.commit('breadcrumb/setbreadcrumb', breadcrumbdata)
next()
})
}
面包屑组件
面包屑组件中渲染匹配到的数据
<template>
<div class="bcg-breadcrumb" v-if="isbreadcrumbshow">
<el-breadcrumb separator="/">
<el-breadcrumb-item
v-for="(item, index) in breadcrumbdata"
:to="item.clickable ? item.path : ''"
:key="index">
{{ item.name }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
import breadcrumbs from "./breadcrumb.config"
export default {
name: 'breadcrumb',
computed: {
isbreadcrumbshow () {
return this.curbreadcrumb && this.curbreadcrumb.isshow
},
breadcrumbdata () {
return this.$store.state.breadcrumb.breadcrumbdata
},
curbreadcrumb () {
return this.breadcrumbdata[this.breadcrumbdata.length - 1]
}
}
}
</script>
cli命令实现
cli命令开发用到的相关库如下：这些就不细说了，基本上看下 readme 就知道怎么用了
- ：命令行工具
- ：在终端画一个框
- inquirer ：命令行交互工具
- ：模版引擎
目录结构
lib // 存命令行文件
|-- bcg.js
template // 存模版
|-- breadcrumb // 面包屑配置文件与组件，将生成在项目 @/components 中
|-- breadcrumb.config.json
|-- index.vue
|-- braadcrumb.js // vuex 相关文件，将生成在项目 @/store 中
|-- new-page.vue // 新文件模版，将生成在命令行输入的新路径中
|-- route.js // 路由前置守卫配置文件，将生成在 @/plugins 中
test // 单元测试相关文件
node 支持命令行，只需在 package.json 的 bin 字段中关联命令行执行文件
// 执行 bcg 命令时，就会执行 lib/bcg.js 的代码
{
"bin": {
"bcg": "lib/bcg.js"
}
}
实现命令
实现一个 init 命令，生成相关面包屑文件（面包屑组件、 json配置文件、 前置守卫plugin、 面包屑store）
bcg init
实现一个 new 命令生成文件，默认基础路径是 src/pages ，带一个 -b 选项，可用来修改基础路径
bcg new <file-path> -b <base-path>
具体代码如下
#!/usr/bin/env node
const path = require('path')
const fs = require('fs-extra')
const boxen = require('boxen')
const inquirer = require('inquirer')
const commander = require('commander')
const handlebars = require('handlebars')
const {
createpatharr,
log,
errorlog,
successlog,
infolog,
copyfile
} = require('./utils')
const vue_suffix = '.vue'
const source = {
vue_page_path: path.resolve(__dirname, '../template/new-page.vue'),
breadcrumb_component_path: path.resolve(__dirname, '../template/breadcrumb'),
plugin_path: path.resolve(__dirname, '../template/route.js'),
store_path: path.resolve(__dirname, '../template/breadcrumb.js')
}
const target = {
breadcrumb_component_path: 'src/components/breadcrumb',
breadcrumb_json_path: 'src/components/breadcrumb/breadcrumb.config.json',
plugin_path: 'src/plugins/route.js',
store_path: 'src/store/breadcrumb.js'
}
function initbreadcrumbs() {
try {
copyfile(source.breadcrumb_component_path, target.breadcrumb_component_path)
copyfile(source.plugin_path, target.plugin_path)
copyfile(source.store_path, target.store_path)
} catch (err) {
throw err
}
}
function generatevuefile(newpagepath) {
try {
if (fs.existssync(newpagepath)) {
log(errorlog(`${newpagepath} 已存在`))
return
}
const filename = path.basename(newpagepath).replace(vue_suffix, '')
const vuepage = fs.readfilesync(source.vue_page_path, 'utf8')
const template = handlebars.compile(vuepage)
const result = template({ filename: filename })
fs.outputfilesync(newpagepath, result)
log(successlog('\nvue页面生成成功咯\n'))
} catch (err) {
throw err
}
}
function updateconfiguration(filepath, {
clickable,
isshow
} = {}) {
try {
if (!fs.existssync(target.breadcrumb_json_path)) {
log(errorlog('面包屑配置文件不存在, 配置失败咯, 可通过 bcg init 生成相关文件'))
return
}
let patharr = createpatharr(filepath)
const configurationarr = fs.readjsonsync(target.breadcrumb_json_path)
// 如果已经有配置就过滤掉
patharr = patharr.filter(pathitem => !configurationarr.some(configurationitem => configurationitem.path === pathitem))
const questions = patharr.map(pathitem => {
return {
type: 'input',
name: pathitem,
message: `请输入 ${pathitem} 的面包屑显示名称`,
default: pathitem
}
})
inquirer.prompt(questions).then(answers => {
const patharrlastidx = patharr.length - 1
patharr.foreach((pathitem, index) => {
configurationarr.push({
clickable: index === patharrlastidx ? clickable : false,
isshow: index === patharrlastidx ? isshow : true,
name: answers[pathitem],
path: pathitem
})
})
fs.writejsonsync(target.breadcrumb_json_path, configurationarr, {
spaces: 2
})
log(successlog('\n生成面包屑配置成功咯'))
})
} catch (err) {
log(errorlog('生成面包屑配置失败咯'))
throw err
}
}
function generating(newpagepath, filepath) {
inquirer.prompt([
{
type: 'confirm',
name: 'clickable',
message: '是否可点击跳转? (默认 yes)',
default: true
},
{
type: 'confirm',
name: 'isshow',
message: '是否展示面包屑? (默认 yes)',
default: true
},
{
type: 'confirm',
name: 'onlyconfig',
message: '是否仅生成配置而不生成文件? (默认 no)',
default: false
}
]).then(({ clickable, isshow, onlyconfig }) => {
if (onlyconfig) {
updateconfiguration(filepath, { clickable, isshow })
return
}
generatevuefile(newpagepath)
updateconfiguration(filepath, { clickable, isshow })
})
}
const program = new commander.command()
program
.command('init')
.description('初始化面包屑')
.action(initbreadcrumbs)
program
.version('0.1.0')
.command('new <file-path>')
.description('生成页面并配置面包屑，默认基础路径为 src/pages，可通过 -b 修改')
.option('-b, --basepath <base-path>', '修改基础路径 (不要以 / 开头)')
.action((filepath, opts) => {
filepath = filepath.endswith(vue_suffix) ? filepath : `${filepath}${vue_suffix}`
const basepath = opts.basepath || 'src/pages'
const newpagepath = path.join(basepath, filepath)
log(
infolog(
boxen(`即将配置 ${newpagepath}`, {
padding: 1,
margin: 1,
borderstyle: 'round'
})
)
)
generating(newpagepath, filepath)
})
program.parse(process.argv)
if (!process.argv.slice(2)[0]) {
program.help()
}
发布 npm
开发完成后，发布到 npm，具体方法就不细说了，发布后全局安装就能愉快的使用咯！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
