脚手架工具什么是脚手架工具？在工程中，最重要的是脚手架工具。什么是脚手架工具？生活中其实很常见：比如写网站的时候，一开始就是从头开始，然后写同类型的网站时，直接复制前面的代码就可以了。如果把可以复制的内容提取出来就好了，每次开发新的东西都能自动生成。再举个例子，我们家包饺子之前，都是自己擀皮的。后来发现楼下超市有饺子皮。饺子皮是半成品，脚手架就是用来做这些半成品的。在我们的项目中，会有各种文件夹和文件，可以一键生成脚手架：脚手架的作用：创建项目基础设施，提供项目规范和约定。前端脚手架工具分为通用型和专用型两大类。General-purposescaffoldingtoolYeomanYeoman的基本概念：Theweb'sscaffoldingtoolformodernwebapps，即现代web应用的脚手架工具。Yeoman是一个脚手架工具，可以帮助开发人员创建项目的基础架构代码。yo是Yeoman的命令行管理工具，可以在命令行运行yeoman命令。generator生成器是Yeoman中的特定脚手架。不同的项目有不同的脚手架生成器，比如网站、app、小程序等。Yeoman使用说明及步骤：全局安装yo：npminstall-gyo安装生成器，不同的生成器可以生成不同的项目：npminstall-ggenerator-webapp||npminstall-ggenerator-node通过yo运行生成器：yowebapp||yoNode启动应用：npmrunstart使用步骤：1：确定你的需求；2：找到合适的Generator；3：全局安装找到的Generator；4：通过Yo运行对应的Generator；5：通过命令行交互填写选项；6：生成你需要的项目结构；CustomGenerator基本上就是用一个Generator来对应一类工程。我们可以通过自定义Generator实现自己的脚手架工具，高度定制适合自己的脚手架工具。创建一个Generator实际上就是创建一个NPM模块。一个Generator的基本结构：如果要生成多个Generator，只需要创建相应的目录和文件即可。另外需要注意的是Generator的名字必须是generator-的形式。创建一个文件夹，然后初始化项目npminit-yinstallGenerator基类，基类提供了很多工具函数，让我们轻松完成定制npminstallyeoman-generator然后根据目录创建generator-sample\generators\app要求\index.js文件。注意不要写错文件夹和文件名：generator-xxx\generators\xxxx\index.jsindex.js：最后使用npmlink命令将generator-sample挂载为全局命令。如果出现意外，可以使用npmconfiggetprefix命令找到npm全局目录，然后查看generator-sample是否存在。确认global命令创建成功后，就可以使用yosample命令在新目录下生成文件内容了。生成的内容是我们手动创建的，不够灵活。使用模板创建文件创建generators\app\templates\foo.txt目录和文件。这是一个模板文件，可以使用EJS（https://ejs.bootcss.com/）模板标签在里面输出数据。例如：<%=title%>其他的EJS语法也是支持的，比如：<%if(success){%>西陵老师<%}%>写好模板文件后，我们就可以使用模板生成文件了内容。与手动创建每个文件相比，模板方式大大提高了效率，尤其是在文件多且复杂的情况下。命令行交互创建模板\app\templates\index.html和之前一样创建Vue脚手架，我们创建一个generator-xiling-vue项目目录，使用命令npminstallyeoman-generator安装基类，完成命令入口文件中的行交互和文件写入相关内容。因为我们需要使用模板来编写文件的内容，所以我们需要创建一个模板文件。这里不再手动编写，直接使用已经创建好的修改使用。直接将现有的Vue空项目代码复制到模板中。然后修改name部分，在generator-xiling-vue\generators\app\templates\public\index.html文件中，如果不需要替换escape，用两个%%屏蔽，当重写。修改模板后，可以写入文件内容，回到generator-xiling-vue\generators\app\index.js入口文件，将模板中的相对路径和文件名存入数组，然后使用完整遍历代码如下：最后还是使用npmlink挂载一个全局命令行，然后在这里新建一个项目目录，在该目录的命令行中执行yoxiling-vue创建一个vue项目。如果我们想给脚手架添加更多的功能，只需要按照这个逻辑添加内容或者模板文件，一个自定义的Vue脚手架就创建好了。脚手架的工作原理脚手架的工作流程：通过命令行工具启动一个程序，在命令行交互中获取用户输入，然后创建相应的代码文件。接下来，我们以更原始的方式制作一个极简的脚手架工具，来体验一下脚手架的工作原理。首先我们创建一个项目文件夹mycli，然后执行命令npminit-y初始化项目；然后执行命令npminstallejsinquirer安装两个插件，ejs是模板语法插件，inquirer是命令行交互插件。然后在\mycli\package.json文件中添加代码"bin":"cli.js"指定脚本的入口文件。由于是脚本命令代码，在cjs入口文件中，需要添加文件头第一行。脚手架的工作流程：1.通过命令行交互向用户提问2.根据用户回答的结果生成文件了解工作流程后，先准备模板文件，然后按照流程实现代码。创建模板文件代码脚手架逻辑实现后，在项目目录下执行npmlinkmountglobal命令，即可使用mycli命令创建项目文件。卸载命令行可以使用npmunlink。
