Vue Cli 3 基本操作

安裝運行、執行編譯、安裝套件、環境變數

Chun
8 min readSep 2, 2020

安裝 Vue Cli

  1. 必須先安裝好 node.js (輸入 node -v 可查看 node 的版本。建議安裝 9 版以上,運行才會正常。)
  2. 在終端機上輸入 npm install -g @vue/cli-g安裝全域的環境)
  3. 安裝完後,輸入 vue 會顯示少了一些指令,可再進行安裝
  4. 輸入 vue -V 可查看 vue cli 的版本。

運行 Vue Cli 的方法

方法有兩種:

  1. 在終端機上輸入指令 vue create my-project
  2. 使用 ui 的方式運行,在終端機上輸入 vue ui,就會跳出具有 ui 版本的 vue cli 網頁頁面(執行時,終端機不可關閉,會導致連線失敗)

建立 Vue Cli

  1. 新增專案。輸入資料夾名稱,下方初始化 Git 開啟。

2. 選擇手動設定

3. 將 Babel Router、CSS Pre-processors、Linter / Formatter 開啟

Babel:確保 ES6 的語法在所有瀏覽器都可以正確的運行。

Router:路由

CSS Pre-processors:CSS的預處理器

Linter / Formatter:檢查程式碼有沒有排整齊

4. CSS 預處理器選擇 node-sass。ESLint Airbnb 版是最嚴格的。

5. 按下新增專案後,終端機便開始建立環境,會需要跑一下。

執行 Vue Cli

  1. 按下執行後便會開始編譯開發環境

2. 按下啟動 app 就會把環境給運行起來

3. 回到剛才建立的專案資料夾,使用 vscode 開啟

node_moduless:剛才安裝好的套件,包含編譯 sass 和編譯 vue 檔案的功能。

public:這個資料夾內的東西都不會被編譯,適合放圖檔(jpg, png)。

根目錄下的檔案,就是運行的環境。

package.json:安裝套件所紀錄的檔案(安裝的套件都會寫在這裡)

src 資夾內有 main.js,主要的 js,所有的外部套件及檔案都會跟它產生關聯,如下圖所示

views 資料夾內的 .vue 檔都是完整的頁面檔案(主要頁面)。

components 資料夾內的 .vue 檔,皆為小元件,如分頁元件、Modal元件等。

assets資料夾內放自定義的 JS、CSS..檔

編譯 Vue Cli

按下 build 便會開始編譯,並輸出一個資料夾 dist。裡面的 index.html 即是編譯及壓縮後的檔案,無法被直接運行,必須使用 webServer 才能被運行起來。此資料夾檔案即是一個完整的專案資料夾,可直接丟掉後端伺服器做運行,但是沒辦法以資料夾的形式來運行。

在 Vue Cli 上安裝套件

插件

基於 vue cli 環境進行擴充,如 vuex、樣板語言 pug 等等,就可以在這裡做選擇。

依賴

分為「執行依賴」及「開發依賴」。「開發依賴」是基於 webpack 或 node 的環境下進行擴充。「執行依賴」會比較常使用,例如 bootstrap、vue,前端環境會執行的程式碼或套件都是使用「執行依賴」。

點擊「安裝依賴」後,輸入要安裝的套件名稱,以下示範安裝 vue-loading-overlay安裝文件),點選後便可進行安裝,安裝套件會花上一些時間。

安裝完後回到選單「任務」→「serve」,按下執行後就可以直接運行它。

執行完後回到選單「依賴」,即可看見剛才安裝好的套件。

在 package.json 上也可以看到剛才安裝好的套件。

把套件 import 加載到 main.js 裡,加載完之後要使用此套件時,必須載入元件,使用「全域註冊Vue.component() 的方式載入元件,使用此方式在任何頁面上都可以使用這個元件。

在 App.vue 上,放上 loading 效果的程式碼,並設定 loading 效果呈現的時間,使用 isLoading: false/true 的方式,來判斷是否要顯示 loading 效果。

在 Vue Cli 上使用 AJAX

安裝 vue-axios(vue-axios文件

npm install --save axios vue-axios

這裡會安裝兩個套件,一個是 axios,另一個是 vue-axios。以下是示範用 vue ui 安裝依賴的方式安裝套件。

安裝完後,回到 package.json 可以看到剛才安裝好的套件。

然後,回到 main.js 將 axios 和 vue-axios 套件 import 進來。我們使用外部套件時,最常用的元件載入方式有兩種,第一種是上述提到的「全域註冊」,第二種是「把套件加到 Vue 的藍圖(原型)內」,而這裡使用的即是第二種方法 Vue.use(VueAxios, axios)

使用 vue-axios

有以下三種使用方法,與原生的 axios 寫法幾乎相同:

Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
this.$http.get(api).then((response) => {
console.log(response.data)
})

因為 App.vue 和 main.js 是有關連的,所以回到 App.vue 便可直接使用 vue-axios

環境變數

因為每個環境(開發團隊、內部測試主機、正式機)所使用到的參數都不太一樣,因此需要獨立出來一個環境變數,他是一個 .env 的形式,會跟專案獨立開來,另外存出一份檔案,這個環境變數可以被修改,方便給不同環境下做使用。

Vue CLI 環境變數(文件

Vue CLI 的環境變數是用 node.js 來做運行的,變數的開頭一定要使用 VUE_APP_,後面接自定義名稱,如下:

VUE_APP_UUID=
VUE_APP_APIPATH=

在專案資料夾根目錄上,新增一個 .env 的檔案。並在檔案內代入環境變數的名稱(開頭VUE_APP_)和值(皆為字串,不需要引號)。

回到 App.vue,將剛才建立好的環境變數代入。由於這個環境變數是使用 node.js 來做運行的,所以要在變數前面再加上 process.env(node.js 環境變數的語法),加入樣板字面值的完整寫法為${process.env.VUE_APP_APIPATH},如下所示:

回到頁面上時,回發現跳出錯誤訊息,如下。undefined 的部份就是剛才替換成環境變數的地方。

出錯的原因是,每當加入環境變數(或修改環境變數)時,沒辦法馬上讀取到,一定要重新啟動,所以回到 vue ui 的 serve 將執行狀態停止後再重新執行。

回到頁面重新整理後,便能順利取得環境變數。

--

--