15. Vue-cli 與 Node.js

• Vue CLI 官網 (opens new window)

安裝 Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

建立一個新專案

可使用 CLI 或 GUI 介面進行操作。

CLI 介面

使用 vue create 指令建立新專案，並選擇配置。

vue create my-project

GUI 介面

使用 vue ui 指令開啟視覺化頁面進行操作。

vue ui

建立成功之後，所在位置會出現一個名為 "my-project" 的資料夾，裡面有 Vue CLI 預先幫我們建立好的檔案、依賴套件，以及配置。

Vue CLI 檔案架構

打開建立好的專案資料夾，會看到裡面包含如下圖的這些資料夾和檔案。

說明如下：

├─node_modules          // 存放透過 npm 下載的專案相關套件
│
├─public                // 公共資源檔案，不做任何編譯壓縮處理
│ ├─favicon.ico         // 網站 icon
│ ├─index.html          // 頁面入口文件
│
├─src                   // 原始碼資料夾
│ ├─assets              // 靜態文件資料夾
│ ├─components          // 元件/組件資料夾
│ ├─App.vue             // 專案的主元件，專案中的頁面都是在此進行路由切換
│ ├─main.js             // 進入點。專案的核心文件，並用於載入專案需使用的套件
│
├─.gitignore            // Git 忽略配置文件
├─babel.config.js       // Babel 的配置文件
├─index.html            // 頁面入口文件
├─package-lock.json     // 專案的 npm 套件包管控文件
├─package.json          // 專案的 npm 套件配置文件
└─README.md             // 專案說明

參考資料：

• Vue CLI專案檔案結構簡介 (opens new window)
• 關於 Vue Cli 目錄結構 (opens new window)

以上是這些資料夾和檔案的簡要介紹。

副檔名為 ".vue" 的檔案

需要注意的是，裡面有 "App.vue" 和 "HelloWorld.vue" 等副檔名為 ".vue" 的檔案。擁有這個副檔名的檔案，要透過 Vue CLI 的架構、Webpack 的封裝來處理，轉譯成瀏覽器能看得懂的語法，才能正確顯示。

main.js

做為專案的進入點。將 "App.vue" 透過 h (handler) 進行 render，然後 mount 到 "#app" 的位置。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

開始操作

在 package.json 檢視腳本

如果開啟 package.json ，則能看到所有依賴套件，以及制定好的腳本。

Vue CLI 制定好的腳本指令有這些：

• "serve"：用於開發環境。會啟動伺服器，即時更新程式碼的變化。
• "build"：用於生產環境。將程式碼打包壓縮上傳到伺服器，給後端處理。
• "lint"：檢查程式碼的錯誤並家以修正。
• "inspect"：檢查 Webpack 設定，如果對 Webpack 不熟，可用預設值就好。

CLI 介面

先進到資料夾，然後用 npm run serve 編譯並更新。

cd my-project
npm run serve

GUI 介面

到 Vue 控制頁面 > 任務 > Serve > 執行 > 開啟 app。

如果成功，會在瀏覽器開啟如下的頁面。

編譯並壓縮到生產環境

當程式碼完成後，要上傳到生產環境之前，則執行 build 來一次編譯並打包壓縮所有檔案。

CLI 介面

用 npm run build 編譯並壓縮檔案。

npm run build

GUI 介面

到 Vue 控制頁面 > 任務 > Build > 執行。

成功後，專案資料夾中會多出一個 "dist" 資料夾，裡面就是壓縮後用於生產環境的檔案。