基于vue-cli3.0脚手架建立新建页面命令的步骤

背景

现在vue-cli3.0已经普及，本身脚手架也提供了很多功能，我们也可以在它的基础上搭建个性化的脚手架，以满足更多的需求。但是vue-cli本身不支持新增页面的功能，而每次新增页面都需要手动修改。那么手动新增一个页面需要几个步骤呢？

新建页面的步骤

如上图所示，新增一个页面，需要五个步骤：

1、首先要新增一个 vue 主页面，用于开发新页面的业务逻辑；

2、新增状态管理库的JS 文件，用于存储新页面共享的状态和方法；

3、修改状态管理库的入口文件，增加新页面状态管理库文件的引入，例如：

import newPage from './module/newPage'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    newPage
  }
})

4、新增请求对应的 JS 文件，因为我对脚手架进行了请求的独立封装，所以多了一步，用于新页面的请求处理；

5、修改 Router 配置文件，添加新增加的页面路由，例如：

const router = new Router({
  routes: [
    {
      path: '/newPage',
      name: 'newPage',
      component: () => import('@/views/newPage')
    }
  ]
})
export default router

因此，每次新增页面，都要修改上面的五个配置，步骤繁琐不说，偶尔遗漏一项，导致页面发生错误也不是没有发生过。那么如何简化新增页面的步骤呢？

思路

于是借鉴团队的 NutUI 组件库 新增组件，自动生成相应配置文件的思路，引入 inquirer 库，用户与命令行交互的工具, 还有 fs-extra 库，文件相关操作的工具库。执行一个命令，即可自动生成修改以上五个配置文件。

实践

首先引入用户与命令行交互工具，用来输入新页面的名称，关键代码如下：

const newpageQuestions = [{
    type: 'input',
    name: 'pagename',
    message: '请输入新增的页面英文名称',
    validate: function (input){
        if(!input) {
            return '不能为空'
        }
        try {
          var stat = fs.statSync('src/views/' + input)
          return '文件已存在，请退出'
        } catch(error){
          return true
        }
        return true
    }
  }
]
inquirer.prompt(newpageQuestions).then(function (answers) {
    createDir(answers)
})

执行该文件，则在命令行展示如下所示：

当然，可以提前构建好一些模板，然后根据模板类型让用户进行选择。

待我们输入新文件的英文名称，以及中文标题，还有需要的模板之后，就可以使用 fs-extra 文件读写工具来继续往下进行了，比如生成新的 vue 逻辑页面：

// 生成form主目录
function createMainForm (pagename, pagetitle) {
  // 复制文件
  fs.copySync('template/views/form', 'src/views/' + pagename)
  // 修改index.vue文件
  let file = fs.readFileSync('template/views/form/index.vue')
  fs.writeFileSync('src/views/' + pagename + '/index.vue', file.toString().replace(/pagename/g, pagename)) 
}

此外，还需要自动修改 Router 和 Store中对应的引入，例如：

// 修改router
function changeRouter (pagename) {
  const str = '    { path: \'/' + pagename + '\', name: \'' + pagename + '\', component: () => import(\'@/views/' + pagename + '\') },'
  const data = fs.readFileSync('src/router/index.js').toString().split('\n')
  let index = 0
  for (let i = 0; i < data.length; i++) {
    if (data[i].includes('routes: [')) {
      index = i
      break
    }
  }
  data.splice(index + 1, 0, str) // 加入router
  fs.writeFileSync('src/router/index.js', data.join('\n'))
}

这样，原来每次新增页面都要修改或者新建五个文件的历史一去不复返了，一行命令就可以完成新页面的构建，即提高了效率，又减少了人为操作带来遗漏的风险。

结语

受够了一次次花 30 秒钟改代码，不如花 30 分钟 优化现有过程，重复性的工作就交给自动化脚本去实现吧。