摘要：那該怎么管理這兩個不同的項目呢解決子模塊用的的同學肯定一下子就想到子模塊的知識了。最后，也希望有想法的同學還有大佬多多留言，給點建議原文地址從零開始做前端架構腳手架參考資料官方文檔使用定制前端腳手架別人寫的腳手架文件操作相關文檔子模塊

相信很多人都用過vue-cli或create-react-app或者類似的腳手架。
腳手架方便我們復制，粘貼，或者clone代碼庫，而且還可以更具用戶的選擇，引入用戶所需要的插件。
腳手架往往搭配著早已設計好了架構的項目，然后按需進行拷貝。

官網介紹: The web"s scaffolding tool for modern webapps.

yeoman是一款來做腳手架的工具，我們借助它，就能很容易地開發出自己的腳手架了。
yeoman具體的使用，本文不會介紹太多，官網的文檔差不多就夠了，我也會在文章末尾放上自己搜集的一些參考資料，同學們自己看看就好了。

安裝yeoman: npm install -g yo

generator其實就是一個node module，即npm。yeoman根據我們寫的generator來執行我們寫的構建代碼。（對怎么自己選一個npm包不熟悉的同學，可以戳這里>>）
generator文件夾必須以generator-開頭，然后之后跟上自定義的腳手架名字，比如generator-zx-vue，將它做成npm包以后，上傳到npm官網，只有在電腦上全局安裝，然后用yoman運行就好了，之后會詳細介紹。

除了手動創建自己的generator項目，我們還可以通過別人已經做好的腳手架來創建。
安裝generator-generator: npm install -g generator-generator
然后，運行腳手架: yo generator
之后，我們就可以看到一系列的提示，按照提示輸入完信息以后，我們就有了一份編寫自己的generator的模板項目了。

其實，這個generator腳手架生成的很多文件我們都不需要管，我們只需要把注意力放在generator/app這個文件夾下的內容就好了。
templates文件是用來作為倉庫，我們在編寫腳本的時候，如果需要哪些文件，就直接去這個倉庫里copy出來就好了。

因為我們自己做的generator是一個npm包，我們自然希望對其進行版本管理，用上git，方便今后的迭代。
templates其實也是一個獨立的項目，我們之前說了，它是一個早已完成了的項目架子，我們是從gitlab或者github上copy過來的而已。那該怎么管理這兩個不同的項目呢？

git用的6的同學肯定一下子就想到git子模塊的知識了。
不熟悉的同學可以戳 git文檔-子模塊>>

因此，我們不是把項目copy進templates，也不是git clone進templates，而是先刪除app文件夾下的templates，然后：
git submodule add https://github.com/CodeLittlePrince/vue-construct-for-zx-vue.git templates
這樣的話，我們就可以更新自己的倉庫項目（vue-construct-for-zx-vue），generator項目的話，pull子模塊就好了。兩者保持獨立，方便迭代和維護。

接下來，我們就可以來編寫app文件夾下的index.js文件了：

const Generator = require("yeoman-generator")
const chalk = require("chalk")
const yosay = require("yosay")
const path = require("path")
const fs = require("fs")

module.exports = class extends Generator {
  initializing() {
    // 打印歡迎語
    this.log(
      yosay(`Welcome to the shining ${chalk.cyan("generator-zx-vue")} generator!`)
    )
  }
  prompting() {
    // 讓用戶選擇是否需要包含vuex
    const prompts = [
      {
        type: "input",
        name: "name",
        message: "Name of project:",
        default: path.basename(process.cwd())
      },
      {
        type: "input",
        name: "description",
        message: "Description:",
        default: "",
      },
      // {
      //   type: "confirm",
      //   name: "includeVuex",
      //   message: "Would you like to include Vuex in your project?",
      //   default: false,
      // }
    ]
    return this.prompt(prompts).then(answers => {
      this.name = answers.name
      this.description = answers.description
      // this.includeVuex = answers.includeVuex
      this.log(chalk.green("name: ", this.name))
      this.log(chalk.green("description: ", this.description))
      // this.log(chalk.green("includeVuex: ", this.includeVuex))
    })
  }

  writing() {
    // 復制普通文件
    // https://github.com/sboudrias/mem-fs-editor
    this.fs.copyTpl(
      this.templatePath(),
      this.destinationPath(),
      {
        name: this.name
      },
      {},
      { globOptions:
        {
          dot: true
        }
      }
    )
    // 根據用戶選擇，決定是否安裝vuex
    if (this.includeVuex) {
      const pkgJson = {
        name: this.name,
        description: this.description,
        // dependencies: {
        //   vuex: "^3.0.1"
        // }
      }
      // Extend or create package.json file in destination path
      this.fs.extendJSON(this.destinationPath("package.json"), pkgJson)
    }
  }

  install() {
    this.npmInstall()
  }

  end() {
    this.log(chalk.green("Construction completed!"))
  }
}

語法很簡單，具體可以自己看yeoman官方文檔，我簡單的介紹一下幾個比較常用的函數，或者說生命周期：

沒發布上線的npm包，本地測試只需要link一下就好了，到generator根目錄，然后運行npm link，這樣我們就可以使用我們的generator了，比如，到一個新的空文件夾下運行：yo zx-vue，就可以看到項目開始自動構建了。
測試完成后，就可以發布到npm官網了，發布流程可參考我另一篇文章npm-從0開始寫一個npm module

zx-vue是一個以vue-construct作為模板倉庫的腳手架，為了方便新項目構建，也為了今后的新項目能夠統一。

首先，安裝全局yeomman和generator-zx-vue：
npm install -g yo
npm install -g generator-zx-vue
然后找一個空的文件夾執行:
yo zx-vue
生成項目以后的操作可以參考vue-construct
最后，generator-zx-vue的地址是generator-zx-vue

我之前原本打算把vuex作為一個可選項，讓用戶選擇是否引入這個庫。
但是，做下來以后發現，因為用到了ejs模板去做這個事情，然后，最終輸出的文件會因為<% if (condition) { %>這種ejs語法導致換行，或者縮進不符合eslint。當然，我也可以把項目弄的更空一點，把所有vuex的使用清掉，但這樣也不是很好，因為我又想讓用戶跑起來這個項目就能看到整個全家桶的效果在頁面上使用到。
其實還有另外一種比較暴力的方法就是，我弄一個有vuex的項目，一個沒有vuex的項目，然后選擇copy哪份，，太暴力。
憋了好久也沒想到什么很好接受的方法，所以就暫且把vuex也直接帶上。
最后，也希望有想法的同學還有大佬多多留言，給點建議^_^

從零開始做Vue前端架構（9）腳手架

yeoman官方文檔

使用Yeoman定制前端腳手架

別人寫的腳手架generator-webapp

文件操作相關

ejs文檔

git-子模塊