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

相信很多人都用過(guò)vue-cli或create-react-app或者類(lèi)似的腳手架。
腳手架方便我們復(fù)制，粘貼，或者clone代碼庫(kù)，而且還可以更具用戶(hù)的選擇，引入用戶(hù)所需要的插件。
腳手架往往搭配著早已設(shè)計(jì)好了架構(gòu)的項(xiàng)目，然后按需進(jìn)行拷貝。

官網(wǎng)介紹: The web"s scaffolding tool for modern webapps.

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

安裝yeoman: npm install -g yo

generator其實(shí)就是一個(gè)node module，即npm。yeoman根據(jù)我們寫(xiě)的generator來(lái)執(zhí)行我們寫(xiě)的構(gòu)建代碼。（對(duì)怎么自己選一個(gè)npm包不熟悉的同學(xué)，可以戳這里>>）
generator文件夾必須以generator-開(kāi)頭，然后之后跟上自定義的腳手架名字，比如generator-zx-vue，將它做成npm包以后，上傳到npm官網(wǎng)，只有在電腦上全局安裝，然后用yoman運(yùn)行就好了，之后會(huì)詳細(xì)介紹。

除了手動(dòng)創(chuàng)建自己的generator項(xiàng)目，我們還可以通過(guò)別人已經(jīng)做好的腳手架來(lái)創(chuàng)建。
安裝generator-generator: npm install -g generator-generator
然后，運(yùn)行腳手架: yo generator
之后，我們就可以看到一系列的提示，按照提示輸入完信息以后，我們就有了一份編寫(xiě)自己的generator的模板項(xiàng)目了。

其實(shí)，這個(gè)generator腳手架生成的很多文件我們都不需要管，我們只需要把注意力放在generator/app這個(gè)文件夾下的內(nèi)容就好了。
templates文件是用來(lái)作為倉(cāng)庫(kù)，我們?cè)诰帉?xiě)腳本的時(shí)候，如果需要哪些文件，就直接去這個(gè)倉(cāng)庫(kù)里copy出來(lái)就好了。

因?yàn)槲覀冏约鹤龅膅enerator是一個(gè)npm包，我們自然希望對(duì)其進(jìn)行版本管理，用上git，方便今后的迭代。
templates其實(shí)也是一個(gè)獨(dú)立的項(xiàng)目，我們之前說(shuō)了，它是一個(gè)早已完成了的項(xiàng)目架子，我們是從gitlab或者github上copy過(guò)來(lái)的而已。那該怎么管理這兩個(gè)不同的項(xiàng)目呢？

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

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

接下來(lái)，我們就可以來(lái)編寫(xiě)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() {
    // 打印歡迎語(yǔ)
    this.log(
      yosay(`Welcome to the shining ${chalk.cyan("generator-zx-vue")} generator!`)
    )
  }
  prompting() {
    // 讓用戶(hù)選擇是否需要包含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() {
    // 復(fù)制普通文件
    // https://github.com/sboudrias/mem-fs-editor
    this.fs.copyTpl(
      this.templatePath(),
      this.destinationPath(),
      {
        name: this.name
      },
      {},
      { globOptions:
        {
          dot: true
        }
      }
    )
    // 根據(jù)用戶(hù)選擇，決定是否安裝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!"))
  }
}

語(yǔ)法很簡(jiǎn)單，具體可以自己看yeoman官方文檔，我簡(jiǎn)單的介紹一下幾個(gè)比較常用的函數(shù)，或者說(shuō)生命周期：

沒(méi)發(fā)布上線的npm包，本地測(cè)試只需要link一下就好了，到generator根目錄，然后運(yùn)行npm link，這樣我們就可以使用我們的generator了，比如，到一個(gè)新的空文件夾下運(yùn)行：yo zx-vue，就可以看到項(xiàng)目開(kāi)始自動(dòng)構(gòu)建了。
測(cè)試完成后，就可以發(fā)布到npm官網(wǎng)了，發(fā)布流程可參考我另一篇文章npm-從0開(kāi)始寫(xiě)一個(gè)npm module

zx-vue是一個(gè)以vue-construct作為模板倉(cāng)庫(kù)的腳手架，為了方便新項(xiàng)目構(gòu)建，也為了今后的新項(xiàng)目能夠統(tǒng)一。

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

我之前原本打算把vuex作為一個(gè)可選項(xiàng)，讓用戶(hù)選擇是否引入這個(gè)庫(kù)。
但是，做下來(lái)以后發(fā)現(xiàn)，因?yàn)橛玫搅薳js模板去做這個(gè)事情，然后，最終輸出的文件會(huì)因?yàn)?b><% if (condition) { %>這種ejs語(yǔ)法導(dǎo)致?lián)Q行，或者縮進(jìn)不符合eslint。當(dāng)然，我也可以把項(xiàng)目弄的更空一點(diǎn)，把所有vuex的使用清掉，但這樣也不是很好，因?yàn)槲矣窒胱層脩?hù)跑起來(lái)這個(gè)項(xiàng)目就能看到整個(gè)全家桶的效果在頁(yè)面上使用到。
其實(shí)還有另外一種比較暴力的方法就是，我弄一個(gè)有vuex的項(xiàng)目，一個(gè)沒(méi)有vuex的項(xiàng)目，然后選擇copy哪份，，太暴力。
憋了好久也沒(méi)想到什么很好接受的方法，所以就暫且把vuex也直接帶上。
最后，也希望有想法的同學(xué)還有大佬多多留言，給點(diǎn)建議^_^

從零開(kāi)始做Vue前端架構(gòu)（9）腳手架

yeoman官方文檔

使用Yeoman定制前端腳手架

別人寫(xiě)的腳手架generator-webapp

文件操作相關(guān)

ejs文檔

git-子模塊