前言

我们团队的前端项目是基于一个内部后端框架开发的，基于vue和ElementUI进行了定制和打包，增加了我们团队设计的一些模块，可以进一步简化后端页面的开发。

该框架分为三个模块：基本组件模块、用户权限模块和数据图表模块。后台业务层的开发至少要基于基础组件模块，可以根据具体需求增加用户权限模块或数据图表模块。虽然vue提供了一些脚手架工具vue-cli，但是我们的项目是基于多页配置进行开发和打包的，这与vue-cli生成的项目的结构和配置有些不同。所以在创建项目的时候，很多地方还是需要手动修改的，甚至为了方便，直接从之前的项目中复制然后魔改。表面上看，问题不大，但实际上有很多问题：

重复的工作，繁琐又浪费时间。复制的模板容易产生不相关的复制项目。有很多地方需要配置。容易忽略一些配置点，然后人工埋坑的操作可能总会出错。当构建一个新项目时，总是要花时间对内部框架进行故障排除并不断迭代。手工项目往往不知道框架的最新版本号。使用旧版本的框架可能会重新引入一些bug。为了解决上述问题，我开发了一个脚手架工具，可以根据交互动态生成项目结构。

接下来，我将整理一下我的整个开发经历。

基本想法

在你开始清理你的代码之前，先刷刷你的想法。事实上，在实现我的脚手架之前，我反复分析了vue-cli的实现，发现了许多有趣的模块，并从中借鉴了一些好的想法。

Vue-cli在git上独立发布项目模板作为资源，然后在运行时下载模板，由模板引擎渲染，最后生成项目。项目模板与工具分离的主要目的是项目模板负责项目的结构和依赖配置，脚手架负责项目建设的过程。这两部分关系不大，可以分开独立维护。如果项目的结构、依赖关系或配置发生变化，您只需要更新项目模板。

借鉴vue-cli的思想，我还将项目模板独立发布到git，然后通过脚手架工具下载，通过与脚手架的交互获取新项目的信息，并以交互输入作为元信息对项目模板进行渲染，最终得到项目的基本结构。

工程结构

项目基于nodejs 8.4和ES6开发，目录结构如下

/bin # -命令执行文件/lib # -

使用commander.js开发命令行工具

Nodejs内置了对命令行操作的支持，node project下的package.json中的bin字段可以定义命令名称和关联的执行文件。

{ ' name ' : ' Macao-CLI '，' version' :' 1.0.0 '，' description' :' my CLI '，' bin ' : { ' macaw ' 3360 '。/bin/macaw.js'}}使用-g选项进行全局安装时，会在系统的[prefix/bin]目录中自动创建对应的符号链接，并与执行文件关联。如果是本地安装，这个符号链接将在。/node_modules/。bin目录。这样做的好处是nodejs文件可以像命令一样在终端中直接执行。关于前缀，可以通过npm config get prefix获取。

你好，指挥官

在bin目录中创建一个macaw.js文件来处理命令行的逻辑。

触摸。/bin/Macao . js将使用github上一个神图——tj3354开发的module commander.js。Commander.js可以自动解析命令和参数，合并多个选项，处理短参数等。它功能强大，易于使用。有关具体用法，请参见项目的自述文件。

用macaw.js编写命令行的入口逻辑

#!/usr/bin/env节点const program=require(' commander ')//NPM I commander-Dprogram。版本(' 1。0 .0 ')。用法(' command [项目名称]').命令(“你好”，“你好”).解析(process.argv)接着，在容器目录下创建澳门-你好。js，放一个打印语句

触摸/bin/澳门-你好。jsecho的控制台。日志('你好，指挥官')。/bin/澳门-he