背景
虽然已经有vue-cli脚手架，但是对于需要基于特定需求定制的项目结构不能够满足。
什么是脚手架
一句话概括就是负责项目起始阶段的快速创建项目目录结构自动生成相关配置文件。
脚手架的好处：
- 一个命令即可新建一个工程
- 无需关注配置什么，更加专注业务开发
- 相同的项目结构及代码规范，更利于后期维护
如何实现脚手架
3.1）搭建思路
- 通过commander.js处理命令行
- 通过download-git-repo处理下载模板
- 通过inquirer.js处理终端交互
- 通过metalsmith和模板引擎将交互输入项插入到项目模板中 整体流程：终端询问-->选择模板(模板支持添加、删除、查看等功能)-->从远程仓库下载模板-->生成项目
3.2）准备知识
- 1）commander库 一个帮助快速开发nodejs命令行工具的包（库）
- 2）chalk插件 颜色插件
- 3）模板下载
- 4）ora插件 实现node命令行环境的loading效果和显示各种状态的图标等
- 5）inquirer插件 实现命令行交互的功能
- 6）log-symbols插件 日志级别的彩色符号
- 7）handlebars模板 对模板做一些调整，不如修改模板中的package.json
- 8）metalsmith插件 它是一个静态网站生成器，可以用在批量处理模板的场。本质上就是一个胶水框架，通过粘合各种插件完成生产工作
3.3）功能列表
1）提供全局安装命令 2）查看版本 -v 3）添加模板add 4）删除模板delete 5）查看模板列表list 6）根据模板创建项目init 模板名称 项目名称 7）快速创建项目 create-vue 项目名称
3.4）相关支持
- 1）模板仓库
- 2）脚手架代码仓库
- 3）私有npm服务
4 搭建流程
4.1脚手架功能
- 1、全局命令安装 Node.js 中，一个可执行的命令，是通过 package.json 中的 bin 字段来实现的。 在package.json中配置如下：
"bin": {
"fems": "bin/fems",
"fems-create": "bin/fems-create"
},
- 2、模板下载 利用git clone方式进行克隆模板库，并取消远程git关联操作 直接使用默认模板，如果有不同的模板，可以对模板功能进行扩展，比如添加模板、删除模板和查看模板
4.2 脚手架发布
为了让其他人安装脚手架命令，需要私有npm服务进行发布。
发布脚手架流程：
-
1）将私有npm服务添加到npm源 (ps: 为了更好的管理npm源，可以使用nrm(安装：npm install -g nrm)进行管理，更加方便查看和切换) nrm add verdacio http://xxx（机器地址）
-
2）将npm切换为私有服务地址 nrm use verdaccio http://xxx（机器地址） 查看所有npm源
-
3）在脚手架项目目录执行npm publish
-
4）发布成功后，可以通过机器地址进行访问
如果没有私有npm服务或者不想发布，可以通过下载脚手架代码，执行npm link
4.3 脚手架安装
将npm切换为私有服务地址，执行：
npm install fe-cli -g
安装后执行：fems，出现下图所示表示安装成功
4.4 脚手架相关命令
- 1）fems -v 查看版本
- 2）fems -h 查看所有命令
- 3）fems create 项目名称 – 创建项目
如果太懒，可以直接fork可运行的github地址
