vue cli 3 介紹

上次用vue的時候，vue cli的版本還是2，對應指令還是 vue init < 模板名稱 > < 專案名稱 >

vue-cli提供的模板有：
webpack             一個全面的webpack+vue-loader的模板，功能包括熱載入，linting,檢測和CSS擴充套件。
webpack-simple      一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發環境。
browserify          一個全面的Browserify+vueify 的模板，功能包括熱載入，linting,單元檢測。
browserify-simple
 
   一個簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發環境。
simple*             一個最簡單的單頁應用模板。

最近用的時候，已經有vue cli 3了,大致跑了一下，問題還是不大的，但是還是踩了些坑，具體在文章後續會分享。

前期準備

解除安裝舊版本

vue cli 升級到3後，package的名字從 vue-cli 改為了 @vue/cli，裝了舊版本的，官方的建議是，把舊版本的解除安裝了，再安裝新版本。
解除安裝指令如下：
npm uninstall vue-cli -g or yarn global remove vue-cli

node版本

官方建議，node.js的版本，需要是8.9或者以上（建議是8.11.0+）

安裝

安裝指令如下：
npm install -g @vue/cli or yarn global add @vue/cli

建立專案

vue create <projectName>
1. 選擇features

這裡我選了第二個，手動選擇需要的，個人選擇了下圖所示的內容。

2. 是否使用history路由，這裡感覺必要性不大，所以就沒用上,有興趣的或者需要使用的，可以參考Routing with history.pushState
3. 選擇css處理器，一般這裡選第一個就可以了

4. 程式碼風格和eslint

這裡選的是eslint + standard config ， 個人比較習慣這種風格，具體怎麼選擇看個人習慣吧。
5. 選擇lint

6. 選擇lint的配置檔案如何存放，這裡我選了分別存到具體的config檔案，而不是package，便於管理

7. 是否儲存本次建立專案的配置項，用於下次快速建立專案

8. 然後就可以愉快地等待建立專案了

注意事項

vue cli配置檔案

檔案路徑是：C:\Users\duoyi\.vuerc
檔案內容大致如下：

{
  "packageManager": "npm",
  "presets": {
    "vue_create_project": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "standard",
          "lintOn": [
            "save"
          ]
        }
      },
      "router": true,
      "routerHistoryMode": false,
      "vuex": true,
      "cssPreprocessor": "sass"
    }
  },
  "useTaobaoRegistry": false
}

解析

packageManager 用於指定安裝包和執行時，使用的是npm還是yarn
presets 上述安裝步驟中，第7步詢問是否儲存建立配置，用於下次快速建立專案

關於配置，不小心踩的坑

安裝過程中，曾經詢問過我是用npm還是yarn指定安裝包和執行，但是，由於沒細看，選了yarn，後續安裝過程中一直報錯，具體錯誤如下圖：

多次解除安裝重灌vue cli，但是並沒有解決問題，也沒有重新提醒我選擇npm或者yarn。
想了想，那可能是配置檔案的問題了，但是又不知道vue cli 3的配置檔案存在哪，想了想，會不會和設定npm源一樣，可以用npm config這類指令呢
於是，打開了cmd，輸入了vue -h

看到了有vue config指令，輸入後顯示如下：

除了把配置檔案打印出來，還把配置檔案路徑打印出來了，so，不用看了，多次解除安裝重灌,但是依舊未果的原因，就是因為解除安裝重灌不會刪除配置檔案，這裡直接把packageManager改成npm，就解決了上面遇到的問題了

參考連結