随着前端工程化的理念不断深入，我们会更多的选择使用脚手架从零到一搭建自己的项目。大家熟悉的create-react-app和vue-cli,它们可以帮助我们初始化配置生成项目结构、自动安装依赖，最后我们一行指令可运行项目开始开发，或者进行项目构建(build)。这些脚手架提供的都是普遍意义上的最佳实践，但是实际开发中发现，随着业务的不断发展，必然会出现需要针对业务开发的实际情况来进行调整。例如：
- 通过调整相关插件与配置实现打包后的性能优化
- 项目架构调整、编码风格
- 用户权限控制
- 融合公司的基建
- ...
总而言之，随着业务发展我们往往需要沉淀并制作出一套更“个性化”的业务方案。这时候我们最直接的做法就是开发出一个该方案的脚手架来，以便今后能复用这些最佳实践与方案
1.脚手架整体架构设计与基本流程
如上图所示，是一个完整的脚手架npm包结构图，我们想要通过发布该npm包之后，通过全局
npm install -g llzscc_cli 安装该包之后，可以通过llzscc init tenplateName初始化直接拉取生成我们需要的项目工程模板，力图做的直接上手开发，免去项目开始初期的架构设计和初始模块的开发成本。通过这种方式我们只需要致力于优化同一个模板，该模板可以应用于各个项目开发中。
上图所示，通过打开终端执行我们自己定义的终端命令来拉取需要的模板
templates。在脚手架开发过程中我们需要引入一些特定的第三方库：
| 库名 | 描述和作用 |
|---|---|
| commander | 处理控制台命令 |
| chalk | 控制台的效果显示 |
| inquirer | 控制台询问 |
| download-git-repo | git远程仓库拉取 |
| ora | 命令行环境的loading效果 |
2.前端模板脚手架 llzscc_cli 的实现
上图是我当前新写的一个前端脚手架npm发布包源码，已经发布www.npmjs.com/package/llz…, 当前版本功能还比较简单，只做了基础的模板配置，通过全局安装该包：npm install -g llzscc_cli ,有以下commander 命令对应不同的功能：
| commander 命令 | 功能描述 |
|---|---|
| llzscc init xxx(模板名) | 初始化生成一个比较完整的前端项目工程，该工程封装了基本的编译打包、登陆权限、路由权限等 |
| llzscc create xxx(模板名) | 生成一个可选的前端模板（包括各种组件 vue 、vue-router、vuex 等） |
| llzscc --version | 查看当前包的版本 |
| llzscc --help | 帮助指令 |
对于该脚手架的整个源码实现可以通过我的文章：juejin.cn/post/698321… 来具体了解，此处我就不再展开，我们现通过一系列的操作命令来看下能达到一个什么效果：
2.1 llzscc init xxx(模板名)
1.全局安装好llzscc_cli 的最新依赖包之后，可以通过 llzscc --version 来查看是否安装成功：
2.验证包安装成功之后，我们执行命令：llzscc init templateA, 开始初始化生成指定的模板。
3.模板下载成功。以及对应的生成模板项目，该项目模板是具备完善前端基础功能项目模板，对于企业级的项目开发可以做到开箱即用，大大提升开发效率。
2.1 llzscc create xxx(模板名)
1.执行命令：llzscc create templateB 在终端显示出可选项安装模板。
2.选择指定模板后在选择指定的版本。
3.下载完成模板并成功安装。
3.相关源码
- npm地址：www.npmjs.com/package/llz…
- 模板github地址：github.com/llz1990/llz…