40行代码完结简略版 vue-cli

cli 效果

使用 cli 创立一个 Vue3.x 项目

完结流程

完结之前，咱们先简略了解一下 Yeoman。 Yeoman 是一款通用型脚手架工具，没有独立创立项目的能力，需求合作对应的 Generator 才能够完结。举个比如，假如咱们需求创立一个 node 项目，咱们就需求一个 node 的 Generator，然后经过 Yeoman 快速创立出一个 node 项目

## 安装 Yeoman
npm i yo -g
## 安装 generator-node
npm i generator-node -g
## 创立 node 项目
yo node

Generator 的名称格局都是 generator-[name]，使用时 yo + name 即可。 更多Genenrator

了解了 Yeoman 是怎么使用之后，咱们开端完结自己的 Generator 来完结 Vue 的项目创立。

首先咱们初始化一下咱们的 Generator，这儿咱们将其命名 generator-vue。

Yeoman 合作 Generator 创立项目时，会以 generators/app/index 作为程序入口文件 而 geneartors/router/index 会作为子生成器的入口文件（此次不会用，疏忽）

然后咱们开端便编写生成器代码

// 生成器父类
const Generator = require('yeoman-generator')
// 导出生成器 Yeoman 会依据其进行项目创立
module.exports = class extends Generator {
  prompting() {
    // 用户输入
  }
  writing() {
    // 文件写入
  }
  end() {
    // 生成器履行完结
  }
}

这儿 prompting 和 writing 会在 Yeoman 创立项目的特定时期履行，类型 Vue 中的生命周期函数。除了 prompting、writing 和 end 之外，yeoman-generator 还存在以下办法（顺次履行）。

• initializing 初始化办法（检查当前项目状态、获取装备等）
• prompting 提示用户选项
• configuring 保存装备和装备项目
• default 其他原型上的办法
• writing 编写生成器特定文件
• conflicts 处理抵触的当地
• install 安装运转的当地
• end 说再见的当地

咱们现从用户提示开端

const Generator = require('yeoman-generator')
module.exports = class extends Generator {
  async prompting() {
    // 用户输入
    this.answer = await this.prompt([
      {
        type: 'input', // 用户提示类型 存在 input | list | checkbox | confirm ...
        message: '项目名称？', // 用户提示
        name: 'projectName', // 用户答复对应的字段名（经过 this.answer.projectName 便可拿到用户答复）
        default: 'vue-project', // 默认值
      },
      {
        type: 'list',
        message: '项目的 Vue 版别',
        name: 'version',
        choices: ['2.x', '3.x'], // 选项
        default: '2.x',
      },
    ])
  }
  writing() {
    // 文件写入 输出用户答复
    this.log('projectName', this.answer.projectName)
    this.log('version', this.answer.version)
  }
}

由于咱们 Generator 并没有发布到 npm 上，大局的 Yeoman 还访问不到咱们咱们写的 generator-vue，所有咱们还需求将自己的包链接到本地

## 根目录
npm link
yo vue

成功！正常输入咱们的选择。

然后咱们开端经过用户选择的装备进行 vue 项目的创立（文件读写）

思路：

• 准备 vue 项目模版文件
• 依据用户选择的装备进行对应文件读写和内容替换

1. 咱们的 Generator 支撑不同版别的 Vue，所以咱们需求别离准备 2.x 和 3.x 的 Vue 项目模版。

2. 读取对应版别模版 -> 内容替换 -> 输出到指定目录

const Generator = require('yeoman-generator')
module.exports = class extends Generator {
  async prompting() {
    // 用户输入
    this.answer = await this.prompt([
      {
        type: 'input', // 用户提示类型 存在 input | list | checkbox | confirm ...
        message: '项目名称？', // 用户提示
        name: 'projectName', // 用户答复对应的字段名（经过 this.answer.projectName 便可拿到用户答复）
        default: 'vue-project', // 默认值
      },
      {
        type: 'list',
        message: '项目的 Vue 版别',
        name: 'version',
        choices: ['2.x', '3.x'], // 选项
        default: '2.x',
      },
    ])
  }
  writing() {
    const { projectName, version } = this.answer
    this.fs.copyTpl(
      // templatePath 办法以 Generator 入口文件下的 templates 为基础路径进行拼接
      this.templatePath(version),
      // 以 Yeoman 履行的当前目录为基础路径进行拼接
      this.destinationPath(projectName),
      {
        projectName, // ejs 模版中的变量
      }
    )
  }
}

到此咱们便完结了简略版的 Vue 脚手架。

最后，假如想了解更多关于 Yeoman 的内容。能够重视以下文档。

• Yeoman 文档
• Yeoman Generator 文档
• Yeoman Generator Api 文档