0%

[Vue] Vue CLI 3 使用筆記及如何將專案升級至 CLI 3

發表於 更新於 分類於 Disqus：

之前介紹過 Vue CLI 2 的基本用法了，這次來介紹 Vue CLI 3 囉！
CLI 3 最讚的地方就是有了視覺介面，在管理專案上更加直覺了，
這篇文章就要來介紹如何用 CLI 3 建置專案。

Vue CLI 2 跟 3 的差異

  1. CLI 3 增加 GUI 介面，取代之前需要指令才能達成的事。
  2. 可以在 Webpack 新增編譯插件，例如 TypeScript。

創建 Vue CLI 3 的專案

可以使用終端指令來創建，也可以使用 GUI 來創建。

終端指令創建法

1
vue create 專案資料夾名稱

接著選擇專案要內建的設定檔，可以先從手動選擇 (Manually select features) 開始。
需要選擇的項目有：

  • Babel: 把 ES6 編譯成大部分瀏覽器都能運行的版本
  • CSS Pre-processors: SASS 之類的預處理器

以上項目選好之後，還要決定這些設定檔要寫在獨立的檔案還是寫在 package.json，這邊可以按自己習慣來選擇，我個人是選擇 package.json。

最後，還有一個問題是問說：是否要把以上的設定儲存為設置偏好，下次創建專案時可以沿用。這邊也是看個人習慣來選擇。

GUI 介面創建法

  1. 在終端機輸入指令：vue ui
  2. 接下來專案建立過程很直覺，按照提示一步步往下推進即可。
  3. 建立好後，可以在側欄看到 Plugins 跟 Dependencies，前者是 Vue Cli 運行環境中需要用到的功能，後者是前端開發需要用於專案的套件。
  4. Configuration 是依據 Plugins 而生成的設定檔。
  5. Tasks 就是 package.json "scripts" 中的項目，所以要運行特定的 mode 時可以在這邊直接按下 Run task 按鈕與 Open app 按鈕。

資料夾結構

CLI 3 與 2 比較不同的地方在於，比較看不到那麼多設定檔，因為它其實不想讓我們去動那些設定。那些我們看不到的設定檔，其實都在 node_modules 裡面。

node_modules/@vue

node_modules 的 @vue 資料夾中，有個 webpack.config 檔案，另外還有一個 lib 資料夾，裡面有 Webpack 其他的設定，這些都不需要去動。

public 跟 src 是主要撰寫程式碼的地方，尤其 src 最為重要。

src

src 裡面的檔案（包括圖檔）都會被編譯，main.js 依然是進入點，asset 資料夾裡面則可以放需要編譯的 sass 檔跟 js 檔。

回顧 CLI 2，是把所有元件都放在 components 資料夾，而 CLI 3 則分成 views 資料夾及 components 資料夾。

components 資料夾裡面放內部元件，views 資料夾則放外部元件（也就是用 router 切換的分頁）。

在 CLI 3 中，.vue 附檔名預設不能省略，引用檔案時要注意。

public

public 資料夾裡面檔案則不會被編譯，以前 index.html 是放在根目錄，現在則是放在這裡。但是 index.html 其實會被編譯，主要是壓縮並將 src 資料夾內的檔案放進去，在打包時會注入 css 及 js。

如何打包：產生 dist 資料夾

在 package.json 的 "scripts" 項目中，有關於打包的設定。

輸入指令 npm run build 就能執行打包，然後根目錄就會出現一個 dist 資料夾，交付專案時只需要要交出 dist 資料夾。

dist

打開 dist 資料夾中的 index.html，拉到最下面就能看到注入的 js 檔，分別有 vender.js 及 app.js，前者是指從外部載入的資源（來自 node_modules），後者是我們自己撰寫的 JS。

由於 dist 中的 index.html 裡面注入的資源都是從根目錄開始讀起，所以要運行這個 index.html，需要把 dist 資料夾用獨立的 VS code 開起來，才能使用 web server。

環境變數設定

環境變數用來區分開發中版本及正式發布版本的資料庫路徑。
環境變數設定檔名及變數撰寫方式可參考官網。

  1. 在根目錄新增一個專門放環境變數的檔案，例如叫做 .env。
  2. 變數撰寫方式要採用第二種（VUE_APP_自己命名的變數名稱），例如在測試環境下讀出同一個 API 網址的話，就寫成：
    VUE_APP_API=http://localhost:3000/
  3. 到一個元件內，增加一個 hook，讀出剛剛的環境變數，例如：
1
2
3
4
created() {
  console.log(process.env.VUE_APP_API);
  // 讀取環境變數要在開頭加上 process
}
  1. 使用 npm run serve 重整，即可讀取出環境變數。

如果環境變數設定檔不只一個要如何切換？

  1. 如果在 .env 以外還有別的環境變數檔，且檔案名稱是預設的名稱，例如 .env.development（serve 預設環境）或 .env.production（build 預設環境），在變數名稱相同的情況下，權重比 .env 高，所以會優先讀取它們的值。
  2. 也可以自訂檔案名稱，例如 .env 以外的另一個環境變數檔叫做 .env.KK，裡面的變數名稱跟 .env 的一樣但值不一樣。
  3. 到 package.json 的 "scripts" 項目下，該項目原本的值是 "vue-cli-service serve"，在後面多加 --mode KK，整串變成 "vue-cli-service serve --mode KK"。
  4. 使用 npm run serve 重整，就能切換成 .env.KK 設定的變數值了。

安裝 Vue Router 跟 Vuex

安裝 Vue Router 跟 Vuex 的方法很簡單，在 GUI 中選擇 Plugins 後，就可以在最上方點選「Add vue-router」及「Add vuex」。

GUI 中關於 CLI 的設定

在 Configuration 中，Vue CLI 最常被更動的設定是第一個 Base URL，這個項目負責的是 dist 資料夾中所有檔案之間的路徑關係，預設的網頁路徑是從根目錄開始。在這邊可以把它改成專案資料夾名稱，例如 /vuehw/，然後把所有檔案都放進這個資料夾內。
交出去的資料夾結構：

  • dist
    • vuehw
      • css
      • img
      • js
      • index.html
      • favicon.ico

至於 Router 的引入，在 CLI 3 有新的寫法，不須在檔案最前頭先 import 元件，可以在 routes 用箭頭函式導入：

1
2
3
4
5
6
{
  path: '/about',
  name: 'about',
  component: () => import ('./views/About.vue')
  // import() 是一個方法
}

如何把 CLI 2 的專案搬到 CLI 3

  1. 先用 GUI 建立一個新專案。
  2. 選擇需要的工具：Babel / CSS Pre-processor / Router
  3. 打開舊專案的 package.json，安裝 CLI 2 所用到的套件：axios / bootstrap / jQuery / popper.js / vue-axios / vue-loading-overlay 等等。
  4. 安裝完以後，打開 src/main.js，把相依套件都載入。這邊可從舊專案的 main.js 複製 import 程式碼以及啟用程式碼。
  5. 打開舊專案的 App.vue，複製全部程式碼到新專案的 App.vue。
  6. 完成上一步以後會發現 console 跳錯，這是因為我們還沒加入環境變數，所以 AJAX 失敗。所以接下來要加入環境變數到新專案中。
  7. 在 src 新增檔案 .env.development，按照 CLI 3 的方式命名環境變數，再把對應的值從舊專案的 dev.env.js 貼過來。
1
2
VUE_APP_APIPATH=https://vue-course-api.hexschool.io
VUE_APP_CUSTOMPATH=gretema
  1. 加入環境變數後，要再把所有 AJAX 用到的 API 位址改成新的變數名稱。
  2. 載入其他元件，把舊專案 components/Home.vue 貼到新專案同名檔案裡。
  3. 接下來打開新專案 router.js，可以發現這邊引入元件的方式不同，是直接在 routes.物件.component 中用箭頭函式引入元件，而不是在檔案最上方 import。
1
2
3
4
5
6
7
8
9
routes: [
  {
    path: '/',
    name: 'home',
    component: () => import('./views/Home.vue'),
  },
]

// import() 中放入元件路徑

Vue CLI 快速原型開發

使用 Webpack 針對單一 .vue 檔案進行管理，適用於較小型的專案
參照官網「快速原型開發」。

  1. 安裝全域的 cli service。
  2. 準備一個 .html 檔（裡面有 Vue 原始碼）以及一個 all.css。
  3. 新增一個 index.vue，在裡面新增 <template> 標籤，把 .html 中的 <div id="app"> 整段貼進來，貼好後 id="app" 就刪掉。
  4. 在 index.vue 新增 <script> 段落，把 .html 中 Vue 的原始碼貼進來，但在 var app = new Vue({}) 前一行要加上 export default {}，原本 data 開始到最後的程式碼，要貼進這個物件裡。貼好之後，原本的寫法是根實例的寫法，現在必須用元件的寫法，所以 data 要改成 function return 的形式。
  5. 原本 var app = new Vue({}) 可以刪掉了。
  6. 在終端機下指令：vue serve index.vue。
  7. 在 <script> 下方增加 <style>，並在裡面 import all.css。
1
2
3
<style>
@import url('css/all.css');
</style>
  1. 專案完成後打包：vue build index.vue。