vue-cli3.0初體驗～

以前由於parcel的出現，webpack也跟進了零配置
vue-cli天然也不能落下,cli3.0也升級到webpack4，並增長許多新特性

安裝並建立一個項目

支持npm和yarn

npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令，建立項目(不一樣於cli2.0的init，create)
vue create my-project

cli3.0開始支持選項了，以爲對命令行不熟悉的朋友們更友好了～
原本只有2個預選項的（default和manually），我以前建立並保存了一個full

因此咱們主要看一下 manually（default包含在manually裏）

首先是特性選擇

而後是每一個特性的配置文件存放方式（我選了都放在一塊兒～）

最後問你 是否 保存爲預設選項

其實 裏面 還有別的詢問 都是大同小異 問你，在選過你用npm仍是yarn安裝後就再也不問了（以後能夠在.vuerc文件內修改，cd～能看到）會直接幫你建立項目

以後運行npm run serve就行了（也不是之前的 npm run dev了）

而後打印出前臺頁面地址和後臺服務器地址 會自動打開網頁

配置你的項目

雖然說是0配置，實際上是把某些能夠統一的配置項幫使用者配置好了。
固然默認配置也是能夠更改的。

初始目錄

我這個是什麼特性也沒有選的～
（上面選manually只是看看而已～並無選擇任何特性～hhh）
應該說是最精簡的目錄了～
相比cli2.0的目錄，看起來更清爽～

public至關於原來的static，裏面的index.html是項目的入口
src同之前

cli3.0沒有build和config了，
想要配置的話，須要在項目根目錄下建立vue.config.js文件
(官方文檔這麼說噠～)
關於詳細的配置信息，在此放一份 官方說明 供你們參考～

module.exports = {
  // 項目部署的基礎路徑
  // 咱們默認假設你的應用將會部署在域名的根部，
  // 好比 https://www.my-app.com/
  // 若是你的應用時部署在一個子路徑下，那麼你須要在這裏
  // 指定子路徑。好比，若是你的應用部署在
  // https://www.foobar.com/my-app/
  // 那麼將這個值改成 `/my-app/`
  baseUrl: '/',

  // 將構建好的文件輸出到哪裏
  outputDir: 'dist',

  // 是否在保存的時候使用 `eslint-loader` 進行檢查。
  // 有效的值：`ture` | `false` | `"error"`
  // 當設置爲 `"error"` 時，檢查出的錯誤會觸發編譯失敗。
  lintOnSave: true,

  // 使用帶有瀏覽器內編譯器的完整構建版本
  // 查閱 https://cn.vuejs.org/v2/guide/installation.html#運行時-編譯器-vs-只包含運行時
  compiler: false,

  // 調整內部的 webpack 配置。
  // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},

  // vue-loader 選項
  // 查閱 https://vue-loader.vuejs.org/zh-cn/options.html
  vueLoader: {},

  // 是否爲生產環境構建生成 source map？
  productionSourceMap: true,

  // CSS 相關選項
  css: {
    // 將組件內的 CSS 提取到一個單獨的 CSS 文件 (只用在生產環境中)
    extract: true,

    // 是否開啓 CSS source map？
    sourceMap: false,

    // 爲預處理器的 loader 傳遞自定義選項。好比傳遞給
    // sass-loader 時，使用 `{ sass: { ... } }`。
    loaderOptions: {},

    // 爲全部的 CSS 及其預處理文件開啓 CSS Modules。
    // 這個選項不會影響 `*.vue` 文件。
    modules: false
  },

  // 在生產環境下爲 Babel 和 TypeScript 使用 `thread-loader`
  // 在多核機器下會默認開啓。
  parallel: require('os').cpus().length > 1,

  // 是否使用 `autoDLLPlugin` 分割供應的包？
  // 也能夠是一個在 DLL 包中引入的依賴的顯性的數組。
  // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#dll-模式
  dll: false,

  // PWA 插件的選項。
  // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli-plugin-pwa/README.md
  pwa: {},

  // 配置 webpack-dev-server 行爲。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
    proxy: null, // string | Object
    before: app => {
      // `app` 是一個 express 實例
    }
  },

  // 三方插件的選項
  pluginOptions: {
    // ...
  }
}

配置文件去哪了？

由下圖可看出 vue-cli-service 就是配置文件,那麼它在哪裏呢?

而後 我就找到了這個～
（無法貼圖了，忘記sf的貼圖有限制。。）

先貼一個重要的，以後代碼都是這裏的（刪了上面的一個圖，才貼成功。嗚嗚）

vue-cli-service.js

#!/usr/bin/env node

const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

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

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv)
const command = args._[0]

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

而後順藤摸瓜，來看看這個～
Service.js

在這個文件裏找到run方法 再往下一點 看到了 vue.config.js
等等～這不就是文檔說的咱們的配置文件嗎～
哈哈哈～這就算是徹底找到了吧～

不少代碼↑
  loadUserOptions (inlineOptions) {
    // vue.config.js
    let fileConfig, pkgConfig, resolved, resovledFrom
    const configPath = (
      process.env.VUE_CLI_SERVICE_CONFIG_PATH ||
      path.resolve(this.context, 'vue.config.js')
    )
    if (fs.existsSync(configPath)) {
      try {
        fileConfig = require(configPath)
        if (!fileConfig || typeof fileConfig !== 'object') {
          error(
            `Error loading ${chalk.bold('vue.config.js')}: should export an object.`
          )
          fileConfig = null
        }
      } catch (e) {
        error(`Error loading ${chalk.bold('vue.config.js')}:`)
        throw e
      }
    }
不少代碼↓

關於vue-cli3.0體驗的感想

早些年，安卓2.2的時候，熱衷於刷機，嘗試各類rom修改版
如今rom都優化的很好，都是拿來直接用
除非必要，已經沒有多少人熱衷刷機了

對於0配置，也是如此
已經配置好的部分放在裏面，外面簡潔方便大多數人使用
當你想使用本身的配置時，也能夠很方便的修改

下降學習成本增長易用性纔是王道啊～