前端小白成长之13--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

//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
            )
        })
    }
}

举例templates里面文件

三.根据模板创建文件

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

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

创建一个generator-vlover-vue,yarn link注册好后，后面yo clover-vue直接在想生成脚手架的文件下运行，就可以生成基本框架

my-vue自己生成的文件夹

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

在index.js中定义的模板name，可以在一些地方用比如README.md中写入<%= name%>

四.发布 Generator

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

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,

成功了

上npm查到了