# generator-myvue

**Repository Path**: big-right-right/generator-myvue

## Basic Information

- **Project Name**: generator-myvue
- **Description**: 用yeoman生成一个 可生成vue项目 的生成器
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-28
- **Last Updated**: 2022-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 用Yeoman生成一个自己的vue项目框架
创建一个Generator模块 实质上就是创建一个npm模块

## Geneator项目的基本结构：
generators     生成器目录
  app          默认生成器目录
    index.js   默认生成器实现
  component    其它生成器目录
    index.js   其它生成器实现
package.json   模块包配置文件

ps: yeoman的生成器模块命名格式：generator-<name>


## 用yeoman定义一个简单的生成器，用于生成一个文件
项目根目录下初始化package.json: 
```
yarn init
```

安装yeoman-generator 其提供了生成器的基类：
```
yarn add yeoman-generator
```

## 用yeoman定义一个生成器，可根据模板创建文件
在generators文件夹下新建一个templates目录，其下放置模板文件
项目根目录下创建generators/app/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 = [
            '.gitignore',
            'babel.config.js',
            'package.json',
            'README.md',
            'public/favicon.ico',
            'public/index.html' ,
            'src/App.vue',
            'src/main.js',
            'src/assets/logo.png',
            'src/components/HelloWorld.vue'
        ];
        templates.forEach(item => {
            this.fs.copyTpl(
                this.templatePath(item),
                this.destinationPath(item),
                this.answers
            )
        })
    }
}

```

用yarn link命令，将本项目放入yarn内存，成为一个全局模块包：
```
yarn link
```

然后进入想要执行该生成器的目录，执行该生成器：
```
yo myvue
```

## 发布 generator
发布 generaor其实就是发布一个npm包 用（npm publish / yarn publish）