地址

Vue CLi3 github
Vue CLi web

安裝

命名方式已經改為npm推薦的作用域規則，詳情查看此文章

npm i @vue/cli -g
yarn add @vue/cli global
# 查看版本
vue -V

創建一個項目

vue create clidemoe  # 2.0中 vue init webpack clidemoe

第一次創建只會有兩個選項（default和Manually select features），1和2是我之前創建保存的。
這里我們主要看Manually select features：

接著是選擇路由是否使用history模式：
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

創建方式2：

1. 選擇包管理器
2. 選擇配置，可以選擇默認，也可以自己手動配置（一般手動配置），還可以選擇之前配置過的（前提是有保存）

3. 選擇功能（插件）

4. 選擇配置
5. 如果勾選了保存預設，會有彈框讓你輸入這次保存的預設名
   創建好了，看看頁面
   
   插件
   
   依賴

默認啟動服務方式：

npm run serve  # 2.0中 npm run dev
npx vue-cli-service serve

對比：
CLi2啟動方式是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js，使用的是webpack-dev-server搭的服務
CLi3啟動方式是vue-cli-service serve
vue-cli-service serve就是CLi服務，文件位于node_modules@vue\cli-service\bin

目錄結構

cli2

cli3

相較于2.0，3.0的目錄結構簡單了許多，少了build、config兩個目錄，安裝時自動下載了node_modules，3.0的webpack配置可以在根目錄新建一個vue.config.js文件。
Vue CLi3.0刪除了config和build文件夾，現在配置webpack只需要在項目的根目錄下新建vue.config.js文件

#vue.config.js 完整默認配置
module.exports = {
     // 基本路徑
     baseUrl: '/',
     // 輸出文件目錄
     outputDir: 'dist',
     // 用于嵌套生成的靜態資產（js，css，img，fonts）的目錄。
     assetsDir: '',
     // 以多頁模式構建應用程序。
     pages: undefined,
     // eslint-loader 是否在保存的時候檢查
     lintOnSave: true,
     // 是否使用包含運行時編譯器的Vue核心的構建。
     runtimeCompiler: false,
     // 默認情況下babel-loader忽略其中的所有文件node_modules。
     transpileDependencies: [],
     // 生產環境sourceMap
     productionSourceMap: true,
     // webpack配置
     configureWebpack: () => {},
     chainWebpack: () => {},
     // css相關配置
     css: {
      // 啟用 CSS modules
      modules: false,
      // 是否使用css分離插件
      extract: true,
      // 開啟 CSS source maps?
      sourceMap: false,
      // css預設器配置項
      loaderOptions: {},
     },
     // webpack-dev-server 相關配置
     devServer: {
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null, // 設置代理
      before: app => {}
     },
     // enabled by default if the machine has more than 1 cores
     parallel: require('os').cpus().length > 1,
     // PWA 插件相關配置
     pwa: {},
     // 第三方插件配置
     pluginOptions: {
      // ...
     }
}

瀏覽器兼容性

在package.json文件里多了一個browserslist字段，這個字段指定了項目兼容到哪些瀏覽器。

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

這個字段會被babel用來確定轉義的js特性和需要添加的css前綴。
參考資料：http://www.lxweimin.com/p/bd9cb7861b85

插件

vue add eslint
vue add @vue/cli-plugin-eslint

安裝后會在src目錄下生成一個plugins目錄，里面會生成插件的配置文件。

vue add 的設計意圖是為了安裝和調用 Vue CLI 插件。這不意味著替換掉普通的 npm 包。對于這些普通的 npm 包，你仍然需要選用包管理器。
我們推薦在運行 vue add 之前將項目的最新狀態提交，因為該命令可能調用插件的文件生成器并很有可能更改你現有的文件。

HTML和靜態資源

CSS相關

Vue CLI 項目默認支持PostCss、CSS Modules 和 包含 Sass、Less、stylus在內的預處理器（包還是要安裝的，只是不用配置了）。
預處理器：
在創建項目的時候選擇預處理器（sass/less/stylus）。如果當時沒有選好，內置的webpack任然會被預配置為可以完成所有的處理，你也可以手動安裝相應的webpack loader：

npm i sass-loader node-sass -D
npm i less-loader less -D
npm i stylus-loader stylus -D

PostCSS：
Vue CLi默認開啟了autoprefixer（自動添加前綴），如果要配置目標瀏覽器，可使用package.json的browserslist字段，所以開發時只需使用無前綴的css規則即可。

環境變量和模式

VueCLI移除了配置文件目錄后，如何自定義配置環境變量和模式？
環境變量：
一般項目中，我們針對不同的開發環境，會配置不同的環境變量，下面這些文件會在不同的環境下被載入：

• .env #在所有環境中載入
• .env.development #在開發環境中被載入
• .env.production #在生產環境中被載入
• .env.local #在所有環境中載入，會被git忽略
• .env.development.local #在開發環境中載入，但會被git忽略
• .env.development.local #在生產環境中載入，但會被git忽略

1. 在根目錄下新建兩個文件.env.development，.env.production。用這兩個文件存放環境變量。

// env.development
NODE_ENV=development
VUE_APP_URL=http://123.com

// env.production
NODE_ENV=production
VUE_APP_URL=http://456.com

變量必須以VUE_APP_開頭
被載入的變量將會被vue-cli-service的所有命令、插件、依賴可用。

tips：
為一個特定模式準備的環境文件將會比一般的環境文件擁有更高的優先級。（列如.env.development的優先級比.env高）。

模式：
默認情況寫，一個Vue CLi項目有三個模式：

• development 模式用于 vue-cli-service serve
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用于 vue-cli-service test:unit

每個模式都會將NODE_ENV的值設置為模式的名稱——比如在development模式下NODE_ENV的值會被設置為development。
可以在package.json中，通過傳遞 --mode 選項參數為命令行指定模式。

dev-build："vue-cli-service build --mode development"    #指定模式

案例

//vue.config.js
module.exports = {
  baseUrl: process.env.NODE_ENV !== 'production' ? '/' : '/bl/',
// 這里在webpack配置時判斷不同環境下使用不同配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === "development") {
        config.devtool = "source-map";
    } else if (process.env.NODE_ENV === "production") {
        config.devtool = "eval-source-map";
    }
  }
}

如果安裝完vue-cli3后，還想用vue-cli2怎么辦？這個時候就需要安裝一個橋接工具了

npm install -g @vue/cli-init
//安裝完后 就還可以使用 vue init 命令
vue init webpack my-demo