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

最新推荐文章于 2024-05-08 17:51:53 发布

weixin_39958025

最新推荐文章于 2024-05-08 17:51:53 发布

阅读量169

点赞数

文章标签： app.vue里使用data

本文链接：https://blog.csdn.net/weixin_39958025/article/details/113537095

版权

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

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

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

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 master

yarn 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