脚手架工具四、创建模块 五、根据模板创建文件六、接收用户输入内容七、实现一个Vue 模块
一、脚手架工具的本质作用
创建项目基础结构，提供项目规范和约定
二、一些常用的前端脚手架工具
React项目 ==> -react-app
Vue.js项目 ==> vue-cli
项目 ==> -cli
这些脚手架工具都大同小异，都是根据信息创建对应的项目基础结构
不过以上这些一般只适用于自身所服务的框架的项目
还有一类就是以为代表的通用型脚手架工具，它们可以根据一套模板，生成一套对应的项目结构，这种类型的脚手架工具一般都很灵活，也很容易扩展
还有一类在项目开发过程中使用的脚手架工具，代表是Plop，用于创建一些特定类型的文件，例如创建一个组件/模块所需要的文件
三、 3.1、基本使用
全局安装
npm i -g yo
是搭配使用的，所以我们需要安装对应的
npm i -g generator-node
新建一个文件件，在该目录下运行命令行
yo node
会提示一些问题需要回答，回答完问题就会创建出一套项目结构 。
3.2、sub
有时候我们并不需要去创建完整的项目结构，而是在现有项目基础上去创建一些特定类型的文件 。例如在项目上添加或者babel的配置文件，这些配置文件都有一些基础代码，我们手动配置可能会配错 。我们就可以通过生成器去帮我们生成，以此来提高我们的效率 。
有上述需求的话我们就能通过所提供的sub 特性来实现 。
// 假设我们要将一个项目变成一个cli项目yo node:cli // 利用generator-node中提供的自己生成器cli去生成一个cli项目需要的文件// 执行后会提示是否重写package.json，输入y，回车// 提示重写了package.json文件，并新建了一个lib/cli文件// 有了这些我们就可以将我们的模块作为一个全局的命令行模块去使用npm link // 将本地模块放到全局npm i // 根据重写的package.json将依赖重新安装study-one --help // study-one就是我的项目名
3.3、使用步骤总结
1、明确需求
2、找到合适的(在官网中查找)
3、全局范围安装找到的
4、通过yo运行对应的
5、通过命令行交互填写选项
6、生成所需要的项目结构
四、创建模块 4.1、注意事项
本质上就是一个npm模块，需要注意的是，有特定的结构
如果需要添加多个sub，则需要在app的统计同级目录下添加一个目录
的模块名称必须是-name格式，如果没使用这种名称，后续在工作的时候就没有办法找到我们所提供的模块 。
4.2、开始创建
新建一个-文件夹作为模块目录
在该目录下运行 npm init -y 创建.json文件
执行 npm i - 这个模块提供了生成器的基类，这些基类当中提供了一些工具函数，这些工具函数可以让我们在创建生成器的时候更加便捷，模块目录结构如下：
// index.js// 此文件作为Generator的核心入口// 需要导出一个继承自Yeoman Generator的类型// Yeoman在工作时会自动调用我们在此类型中定义的一些生命周期方法// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入const Generator = require('yeoman-generator')module.exports = class extends Generator{writing(){// Yeoman 自动生成文件阶段调用此方法// 我们这里尝试往项目目录中写入文件// 注意：这里的fs与node当中的fs模块是不一样的，这是一个高度封装的fs模块，相较于原生的会更加强大一些// 有两个参数，一个是写入文件的绝对路径，一个是写入内容this.fs.write(this.destinationPath('temp.txt'), // 设置输出文件路径Math.random().toString()) }}