摘要：概述當(dāng)創(chuàng)建了一個(gè)后，我們使用就可以啟動(dòng)項(xiàng)目了。這個(gè)命令實(shí)際上是啟動(dòng)了一段腳本，那這個(gè)腳本引用了哪些包呢讓我們來(lái)一探究竟。實(shí)例檢測(cè)本機(jī)版本是否符合需求的版本。鏈接概述這個(gè)包是用來(lái)處理命令行的參數(shù)輸入的。設(shè)置檢查范圍的起始端口號(hào)。

當(dāng)vue-cli創(chuàng)建了一個(gè)vue-demo后，我們使用npm run serve就可以啟動(dòng)項(xiàng)目了。通過(guò)package.json中的serve命令我們可以看到，實(shí)際是啟動(dòng)了vue-cli-service serve這個(gè)命令。這個(gè)命令實(shí)際上是啟動(dòng)了一段node腳本，那這個(gè)腳本引用了哪些包呢？讓我們來(lái)一探究竟。

概述：這個(gè)包是用來(lái)做版本號(hào)規(guī)范處理的，可以校驗(yàn)一個(gè)輸入的版本號(hào)是否符合規(guī)范，以及某個(gè)包是否滿足某個(gè)版本。

實(shí)例:檢測(cè)本機(jī)node版本是否符合vue-cli需求的node版本。

if (!semver.satisfies(process.version, requiredVersion)) {
  error(
    `You are using Node ${process.version}, but vue-cli-service ` +
    `requires Node ${requiredVersion}.
Please upgrade your Node version.`
  )
  process.exit(1)
}

npm 鏈接：https://www.npmjs.com/package...

概述：這個(gè)包是用來(lái)處理命令行的參數(shù)輸入的。

實(shí)例：檢測(cè)命令行參數(shù)中是否有如下幾個(gè)參數(shù)

const args = require("minimist")(rawArgv, {
  boolean: [
    // build
    "modern",
    "report",
    "report-json",
    "watch",
    // serve
    "open",
    "copy",
    "https",
    // inspect
    "verbose"
  ]
})

npm鏈接：https://www.npmjs.com/package...

概述： 一個(gè)輕量級(jí)的調(diào)試工具，根據(jù)參數(shù)返回一個(gè)打印錯(cuò)誤的函數(shù)?？雌饋?lái)是可以讓不同的錯(cuò)誤輸出更清晰，顏色很美。
實(shí)例: 為不同的錯(cuò)誤創(chuàng)建不同的錯(cuò)誤輸出函數(shù)

const logger = debug("vue:env"); //調(diào)用該函數(shù)會(huì)輸出以vue:env開頭的字符串。
//...此處省略好多業(yè)務(wù)代碼
debug("vue:project-config")(this.projectOptions) // 輸出vue:project-config開頭的字符串。

npm鏈接：https://www.npmjs.com/package...

概述：可以以不同的樣式輸出字符串到終端
實(shí)例：打印不一段字符串，其中關(guān)鍵字加粗

if (fileConfig) {
  if (pkgConfig) {
    warn(
      `"vue" field in package.json ignored ` +
      `due to presence of ${chalk.bold("vue.config.js")}.`
    )
    warn(
      `You should migrate it into ${chalk.bold("vue.config.js")} ` +
      `and remove it from package.json.`
    )
  }
  resolved = fileConfig
  resolvedFrom = "vue.config.js"
}

npm鏈接：https://www.npmjs.com/package...

概述：一個(gè)js類型&字段驗(yàn)證的庫(kù)。類似schemas的概念。
實(shí)例：vue-cli中為了確保配置對(duì)象的正確性，定義了一個(gè)藍(lán)本，去校驗(yàn)配置的正確性（主要是校驗(yàn)用戶配置，例如vue.config.js中的輸入）

const schema = createSchema(joi => joi.object({
  baseUrl: joi.string().allow(""),
  publicPath: joi.string().allow(""),
  outputDir: joi.string(),
  assetsDir: joi.string().allow(""),
  indexPath: joi.string(),
  filenameHashing: joi.boolean(),
  runtimeCompiler: joi.boolean(),
  transpileDependencies: joi.array(),
  productionSourceMap: joi.boolean(),
  parallel: joi.boolean(),
  devServer: joi.object(),
  pages: joi.object().pattern(
    /w+/,
    joi.alternatives().try([
      joi.string(),
      joi.object().keys({
        entry: joi.string().required()
      }).unknown(true)
    ])
  ),
  crossorigin: joi.string().valid(["", "anonymous", "use-credentials"]),
  integrity: joi.boolean(),

  // css
  css: joi.object({
    modules: joi.boolean(),
    extract: joi.alternatives().try(joi.boolean(), joi.object()),
    sourceMap: joi.boolean(),
    loaderOptions: joi.object({
      css: joi.object(),
      sass: joi.object(),
      less: joi.object(),
      stylus: joi.object(),
      postcss: joi.object()
    })
  }),

  // webpack
  chainWebpack: joi.func(),
  configureWebpack: joi.alternatives().try(
    joi.object(),
    joi.func()
  ),

  // known runtime options for built-in plugins
  lintOnSave: joi.any().valid([true, false, "error"]),
  pwa: joi.object(),

  // 3rd party plugin options
  pluginOptions: joi.object()
}))

npm鏈接：https://www.npmjs.com/package...

概述：lodash這個(gè)包提供的一個(gè)函數(shù)，有點(diǎn)類似Object.assign()這個(gè)函數(shù)，可以用來(lái)默認(rèn)參數(shù)填充。
實(shí)例：vue中，合并用戶配置(vue.config.js)與默認(rèn)配置。

// lodash官方案例：
_.defaultsDeep({ "a": { "b": 2 } }, { "a": { "b": 1, "c": 3 } });
// => { "a": { "b": 2, "c": 3 } }
// vue-cli中的應(yīng)用
this.projectOptions = defaultsDeep(userOptions, defaults());
// 這里貼上vue-cli的默認(rèn)配置
exports.defaults = () => ({
  // project deployment base
  publicPath: "/",

  // where to output built files
  outputDir: "dist",

  // where to put static assets (js/css/img/font/...)
  assetsDir: "",

  // filename for index.html (relative to outputDir)
  indexPath: "index.html",

  // whether filename will contain hash part
  filenameHashing: true,

  // boolean, use full build?
  runtimeCompiler: false,

  // deps to transpile
  transpileDependencies: [/* string or regex */],

  // sourceMap for production build?
  productionSourceMap: !process.env.VUE_CLI_TEST,

  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: hasMultipleCores(),

  // multi-page config
  pages: undefined,

  //