app.vue里使用data_Yeoman自定义Generator使用案例及Plop的使用

首先我们为什么要创建脚手架？

为了解决我们在创建项目之中复杂的工作。

我们常用的脚手架有哪些？

React项目 => create-react-app

Vue.js项目 => vue-cli

Angular项目 => angular-cli

根据提供的信息，生成相应的文件与配置，服务于自身服务的项目。

Yeoman：通用型脚手架工具，根据一套模板生成对应的项目结构，这种类型的都比较灵活，容易阔还在那。

Plop：在项目开发过程中创建特定类型的文件。

我们主要来了解Yeoman脚手架工具：

• 基本使用

yarn global add yo //全局安装Yo yarn global add generator-node //使用node环境 yo node //创建node基础环境 如果出现错误 需要在环境变量的path项添加yarn的路径，运行 yarn global bin找到路径配置下即可

之后配置一些信息就完成了node环境的配置。

然后我们配置cli应用

yo node:cli

有了这些就可以将这个模块作为全局的命令行模块来使用了。

本地的模块可以通过以下命令到全局范围

yarn link //全局范围

那么我们就可以通过模块名字运行刚刚加进来的模块：

n --help

Yeoman是通用型的脚手架工具，那么我们就总结一下使用Yeoman的步骤：

首先明确自己的需求

通过项目找到自己要使用的Generator

然后全局范围内安装找到的Generator

通过Yo运行对应的Generator

通过命令行交互填写对应的配置选项

生成你所需要的项目结构

我们知道通过不同的Generator生成不同的项目，我们可以通过创建自己的Generator来生成自定义的项目结构。因为世面上的脚手架都是通用的，都是只有基本的骨架而不包含通用的业务代码的，那我们接下来就创建一个的脚手架工具。

首先创建Generator就是创建一个NPM模块，同时Generator有自己的目录结构：

同时generator的名字必须是generator-<name>的格式

我们创建一个generator-li的文件夹

yarn init -y yarn add yeoman-generator //安装这个生成器基类

我们试着写一个简单的生成器

上边代码写完之后，我们需要把generator放入全局

yarn link

我们创建一个新的文件夹my-proj

yarn init yarn add yeoman-generator yo li

文件夹里生成一个temp.txt文件

那么我们根据模板创建文件

然后我们回到生成器的index文件

模板文件生成相对于手动创建每一个文件，模板的方式大大提高了效率，特别是大型的复杂项目。

另外我们可以通过让用户输入的方式获得变量，然后再writing的时候传入变量：

首先我们先修改Generator的index文件

接着使用yo命令 使用生成器

yo li //调用generator-li生成器

那么我们再自定义一个带有基础代码的 Vue.js脚手架。

首先先配置好vue vuex vue-router axios .... 放在模板里，

得到文件路径数组：

yarn link //放入全局 yo vue224 //yo generator名字

那接下来，我们看下怎么发布Generator(npm模块)

做之前，我们会将我们的源代码先托管到公开的仓库上边

echo node_modules > .gitignore //先忽略node_modules目录git init //初始化本地空仓库 git status //看下仓库状态git add . git commit -m 'init generator' git remote add origin 远端仓库地址 git push -u origin masteryarn publish -registry=https://registry.yarnpkg.com//发布模块 并指定镜像

记着项目package.json 中的name一定不能重复

• 那我们现在说下简单的脚手架工具--Plop

yarn add plop --dev

• 在项目根目录新建plopfile.js文件，并且在plopfile.js文件中定义脚手架任务

• 编写用于生成特定类型文件的模板

• 通过Plop提供的CLI运行脚手架任务

yarn plop component

下边使用NodeJS 完成一个自定义的小型脚手架工具

mkdir my-cli cd my-cli code .

yarn init -y

在package.json中添加 bin属性 "bin":"cli.js"

cli.js中必须以 #!/usr/bin/env node 开头 mac电脑必须修改此文件的权限为755

加载与用户交互的控件inquirer yarn add inquirer --dev 制定交互问题

新建一个templates模板目录 创建模板文件 明确模板地址与模板转换后的文件输出地址

安装模板引擎ejs yarn add ejs --dev 通过循环读取file renderFile每个文件，写入到新的文件夹里。

发布到npm中。

下章分享：

李先生：Grunt的介绍与使用​zhuanlan.zhihu.com

总结

以上是生活随笔为你收集整理的app.vue里使用data_Yeoman自定义Generator使用案例及Plop的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。