yoman脚手架开发流程

随着前端的发展，前后端分离的开发模式等，前端工程化越来越重要，以vue为例，可以使用vue官方提供的vue-cli脚手架初始化项目，但是这样初始化的项目只是最基本的，其中好多配置，比如less-loader、axios等第三方并没有，那每次创建新的项目，我都需要重头再手动安装一次这些，所以就想能不能搞一个工具，可以把之前搭建的基础全面的框架用命令一键生成，正好，现在就有一个这样的工具yoman。

那如何使用yoman把自己搭建的通用性框架封装成一个generator呢？下面我们就详细讲一下这个内容：

1、新建一个名为generator-xxx（yeoman脚手架命名规范）的文件夹，我这里叫generator-vue-web，然后在目录下执行npm init创建package.json文件，然后做一些修改，大概内容如下：

{

  "name": "generator-vue-web",

  "version": "0.0.5",

  "description": "vue-web",

  "homepage": "",

  "license": "MIT",

  "private": false,

  "author": {

    "url": "https://github.com/1196778674/generator-vue-web"

  },

  "files": [

    "generators"

  ],

  "main": "generators/index.js",

  "keywords": [

    "",

    "yeoman-generator"

  ]

}

注意：package.json的信息一定要尽可能完整，不然可能会引发报错；

2、在目录下创建generators文件夹，文件夹包含/app/文件夹和index.js文件，app文件夹创建templates文件夹，这些东西都有什么用呢，我们现在来讲一下，app/templates/文件夹就是我们用到的一个完成前端项目，index.js是脚手架的一些逻辑。

3、开发完成后，我们就可以将generator-vue-web发布到npm了；

需要注意的是：

上传到npm官网之前需要先将脚手架项目上传到github；

脚手架项目的package.json文件一定要尽可能详细，比如git主页，readme文件链接等等；