commander :命令行工具
boxen :在终端画一个框
inquirer :命令行交互工具
handlebar:模版引擎
目录结构
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









