yeoman学习

一.安装

yarn global add yo
yarn global add generator-node

二.创建自己的Generator

1.mkdir generator-clover-vue
2.cd generator-clover-vue
3.yarn init / npm init
4.yarn add yeoman-generator
generator-clover-vue目录下创建generators/app/index.js
// 此文件作为 Generator 的核心入口
// 需要导出一个继承自 Yeoman Generator 的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定 义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入
模板文件放入=》generators/app/templates中
5.yarn link/ npm link 链接到全局模块包，这样yooman在工作时候就可以找到我们自己写的generator
6.yo clover-vue（link到全局，后面需要安装的地方直接yarn link 加上名字）

//index.js
const Generator = require('yeoman-generator')
 
module.exports = class extends Generator{
    prompting() {
        return this.prompt([
            {
                type: 'input',
                name: 'name',
                message: 'Your Project name',
                default: this.appname
            }
        ]).then(answers => {
           this.answers = answers
       })
    }

    writing() {
         // 把每一个文件都通过模板转换到目标路径
        const templates = [
            '.browserslistrc',
            '.editorconfig',
            '.env.development',
            '.env.production',
            '.eslintrc.js',
            '.gitignore',
            'babel.config.js',
            'package.json',
            'postcss.config.js',
            'README.md',
            'public/favicon.ico',
            'public/index.html',
            'src/App.vue',
            'src/main.js',
            'src/routers/router.js',
            'src/assets/logo.png',
            'src/components/HelloWorld.vue',
            'src/store/actions.js',
            'src/store/getters.js',
            'src/store/index.js',
            'src/store/mutations.js',
            'src/store/state.js',
            'src/utils/request.js',
            'src/views/About.vue',
            'src/views/Home.vue'
        ]

        templates.forEach(item => {
            this.fs.copyTpl(
                this.templatePath(item),
                this.destinationPath(item),
                this.answers
            )
        })
    }
}

三.根据模板创建文件

1.app/templates/foo.txt
通过模板方式写入文件到目标目录

这是一个模板文件
内部可以使用 EJS 模板标记输出数据
例如：<%= title %>
其他的 EJS 语法也支持
<% if (success) { %>
哈哈哈
<% }%>

最后再来一张生成文件目录，和上面templates里面一致

四.发布 Generator

图后面要git commit -m “first clover-vue-cli”，截图没截到

做完图上的操作，接着
①去git创建一个本地仓库，名字就叫# generator-clover-vue，
②接着继续命令行 git remote add origin https://github.com/cloveryuan/generator-clover-vue.git
③ git push -u origin master
④npm publish --registry http://registry.npmjs.org//改镜像
接着一系列报错，一一解决比如邮箱认证的， “private”: false,