[Vue.js] 升級vue-cli3建立Vue專案

之前安裝vue-cli2來建立vue專案 --『[Vue.js] 在ubuntu安裝 Vue.js』，有需要可以參考。

開始安裝vue-cli 3

npm install --global @vue/cli

完成安裝後可以用指令檢查版本

vue --version
// or
vue -V

vue cli3多了一個 create 功能來建專案：

vue create [APP_NAME]

你可以使用預設選項或根據需求選擇，結束後會自動幫你執行 npm install。

整個專案目錄精簡了不少，少了 config/ 和 build/ 兩個目錄，然後 static/ 改為 public/。
執行下面指令就可以進入開發囉

npm run serve

vue cli不再使用dev當作開發環境的指令，如果你習慣用dev，可以到 package.json 修改script。



因為移除了 config/ ，因此『[Vue.js] 開發用和正式環境的參數設定方式(.env)』的方式勢必就要調整了。
在專案的根目錄新增兩個檔案 .env、.env.production，分別用在開發和正式環境。所有的參數名稱必須加上前綴 VUE_APP_ ，只有名稱 VUE_APP_* 的參數，才能在vue專案裡使用。

1. .env

VUE_APP_NODE_ENV: '"development"'
VUE_APP_ROOT_API: '"http://localhost/api"'

2. .env.production

VUE_APP_NODE_ENV: '"production"'
VUE_APP_ROOT_API: '"https://example.com/api"'

使用方式和之前相同

export default {
  mounted() {
    console.log(process.env.VUE_APP_ROOT_API);
  }
}

關於環境變量，參考下面連結了解更多。
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables