Vue Cli 3 基本操作

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

Chun

8 min readSep 2, 2020

安裝 Vue Cli

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

運行 Vue Cli 的方法

方法有兩種：

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

建立 Vue Cli

新增專案。輸入資料夾名稱，下方初始化 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

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

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