关于那个yeoman的工具的简单使用的简单介绍嘿

d小王子b
201 阅读3分钟

哈喽哈，我是小王子，今天给大家介绍一下yeomao工具的简单使用，所有的东西全部放在这一篇文章写完，不会分开多个部分，嘿嘿。。。

一、创建基本的环境

首先我们npm init 创建一个基本环境 npm init后然后输入自己的项目名称就可以得到一个文件夹下有package.json

image.png

使用命令 npm i yeoman-generator 安装yeoman的相关依赖包 yeoman-generator

image.png

配置文件目录，主路径下配置generators文件夹下配置app文件夹创建index.js文件，Yeoman 提供了一个基础生成器，您可以扩展它来实现您自己的行为，我们先用现有代码进行测试，首先设置生成器super(args, opts)， 然后添加自定义的代码

image.png

接下来我们实现将log打印到我们的终端

二、简单的基础运行

  1. 首先我们修改package.json里面的name，修改为 generator-[你项目的名称]，file里面写上你文件的路径

image.png

  1. 我们在app文件夹下打开cmd终端，输入npm link运行完毕之后

image.png

3.返回主目录下的终端，输入yo [你项目的名称]，运行就可以打印到你输入的log内容

image.png

三、用户的输入操作

  1. 我们将meyhod1函数修改为异步函数，里面使用ansewers进行接收创建一个问答机制，里面的内容可以由自己修改，一个输可以输入的回答，一个是选择yes/no的回答，然后我们在下面打印用户输入的值

image.png

  1. 然后我们在终端里进行运行，这次的运行依然是在最外层的下面运行，然后就可以得到你输入的结果

image.png

四、文件的交互

  1. 首先我们在app文件夹目录下创建一个templates文件夹，在templates文件夹下创建一个index.html,里面代码如下

image.png

  1. 我们打开app文件夹下的index.js文件，将上一部分的用户操作代码删除，修改为文件的交互代码，这里主要将index.html在新文件夹下面生成在public下面，并将里面的title替换

image.png

  1. 我们新建一个文件夹，随便在哪里新建都可以，然后这时候要记住你的yomen一定要是-g的全局安装，然后在这个新文件夹下面运行你的yo [你的项目名]，这里我新建了一个文件夹

image.png

  1. 然后在这个文件夹下面去运行了yo vue2-home命令，然后你的文件下就会生成相关文件

image.png

  1. 输入命令后文件夹显示目录

image.png

五、npm与package.json的添加

  1. 原来会有一个这个方法来通知构建，现在已经将这个方法去除掉了最新版本的yoman已经不支持这个方法了

image.png

  1. 首先我们去在templates文件夹下创建一个package.json,然后将package.json同上面方法一样引入到新的文件下去

image.png

  1. 然后我们在newTetx文件夹下面去运行yo vue2-home命令，就会自动安装package.json里面的包，相当于会自动运行npm i

image.png

这是一个基本的yeoman工具的使用，咱们下次再聊

avatar
文章
阅读
粉丝