如何將 Vue Cli 2 專案轉移成 Vue Cli 3

文章目的

有時候可能會需要將 Vue Cli 2 的專案轉移成 Vue Cli 3，畢竟現在 Vue Cli 已經進化到 3 了，會讓我們管理專案時更加方便，因此利用此文章做紀錄。

建立新專案

要轉移專案的話，得先建立好一個新專案，並在新專案中套用 Vue Cli 3。
我們可以利用 Vue GUI 快速建立好我們需要的專案。

安裝舊專案的相關套件

• 我們有了新專案後，需要先為它安裝舊專案所擁有的套件。
  我們可以打開舊專案的 package.json，裡頭 dependencies 會寫出有安裝的套件，根據這個我們為新專案重新安裝套件。
  安裝方式有兩種，一種是利用 Vue GUI 的插件去做安裝，另一種則是在專案下利用指令碼的方式做安裝。
  利用指令碼的好處是我們只需要輸入 npm install --save 後面加上需要安裝的套件(可以有多個)，這樣子我們就可以一口氣安裝所需套件。
• 接著我們參考舊專案的 main.js(進入點)，將相關套件 import 進來，這邊有一點要注意的是 Vue Cli 3 裡的 vue 檔，在 import 時一定要加上 .vue 的副檔名。

將專案檔案複製( vue 檔)

接著我們將相關的元件 vue 檔複製過來新專案，這邊說明下 Vue Cli 3 除了 components 這個資料夾外，多了一個 views 的資料夾，views 資料夾是專門給我們放分頁用，假如說是不同 router 的檔案可以放在這。
在轉移檔案時，要注意環境變數問題，因為 3 和 2 的環境變數設定不太一樣，來到 3 我們需要重新設定，有關環境變數設定可以參考這篇 — Vue Cli 3 環境變數設定
這樣子我們就可以將我們的舊專案轉變成新的 Vue Cli 3 專案囉!!

補充– Vue Cli 3 Router 小技巧

在以前我們使用 router 時需先將元件 import 進來再去做使用，但現在有新的方法不需要麼麻煩，只需要在路徑的 component 利用箭頭函式的方式將元件載入即可。

{
    path: '/about',
    name: 'about',
    component: () => import('./views/About.vue') //直接載入路徑即可
}

---

參考資料

六角學院課程–Vue 出一個電商網站