這篇是當時學 Vue CLI 3.0 時留下來的安裝與操作筆記。
安裝 Vue CLI 3.0
1. 確認 Node.js 版本
Node.js 需要 8.9 以上。
node -v
查看目前的 Node.js 版本。
2. 移除舊版 Vue CLI
如果之前有安裝 Vue CLI 1.x 或 2.x：
npm uninstall vue-cli -g
3. 安裝 Vue CLI 3.0
npm install -g @vue/cli
4. 確認是否安裝成功
vue --version
使用 vue ui 建立專案
在終端機輸入：
vue ui
會開啟 Vue CLI 的圖形化管理介面，可以從裡面建立與管理專案。
專案建立完成後，可以在後台看到幾個功能。
插件
查看目前已經安裝的插件。
套件
可以新增專案需要使用的套件。
設定
可以調整專案相關設定。
當時有記到 Base URL，用來設定 build 後資源的路徑。
任務
可以看到：
npm run serve
npm run build
等專案任務。
點選執行可以啟動專案，也可以從 Output 查看指令執行的訊息。
當時 Vue UI 裡還有 Dashboard 與分析功能，可以查看專案執行與打包後的資訊，例如：
- Speed Stats：查看載入速度
- Assets：查看各個檔案的大小
Build 任務則可以用來編譯專案。
如果原本已經用指令建立專案，也可以透過 Vue UI 的匯入功能，把專案加入管理介面。
使用 vue create 建立專案
建立專案：
vue create vueclidemo
建立過程中會詢問要使用哪一種設定。
Preset
可以選：
default
使用預設的 Babel、ESLint。
或選：
Manually select features
自己選擇需要的功能。
當時筆記裡有記到：
- Vue Router
- Vuex
- Sass
- Babel
- ESLint
- Unit Testing
- E2E Testing
也可以把選好的設定儲存成 Preset，之後建立其他專案時繼續使用。
Linter / Formatter
建立專案時可以選擇 JavaScript 的程式碼規範。
當時的選項包含：
TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
當時自己的筆記是：
- Airbnb：規則比較嚴格
- Standard：相對適合剛開始使用
- 初學時如果還不熟 Linter，也可以先不要選太複雜的設定
接著會詢問什麼時候執行 Lint：
Lint on save
存檔時檢查。
或：
Lint and fix on commit
Commit 時進行檢查與修正。
設定檔放哪裡
建立專案時還會詢問設定要放在哪裡。
In dedicated config files
使用獨立的設定檔。
或：
In package.json
把設定放進 package.json。
啟動專案
安裝完成後，就可以執行：
npm run serve
啟動開發環境。
Build：
npm run build
編譯正式環境使用的檔案。
開發伺服器啟動後，當時會看到 Local 與 Network 的網址。
Vue CLI 3.0 專案結構
Vue CLI 3.0 和 Vue CLI 2.0 的專案結構不太一樣。
當時主要記了：
src/
├── components/
├── views/
├── router.js
├── App.vue
└── main.js
components
放置專案內使用的元件。
views
放置 Router 切換的頁面元件。
router.js
當時可以直接使用動態 import() 載入頁面：
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: () => import('./views/Home.vue'),
},
],
});
不用先在檔案上方把 Home.vue import 進來。
當時另外有記到：
在
main.js引入.vue檔案時，要注意檔案名稱與副檔名。
環境變數
先建立：
.env
當時的設定：
VUE_APP_APIPATH=https://vue-course-api.hexschool.io
VUE_APP_CUSTOMPATH=rockayumitw
在程式裡可以透過：
created() {
console.log(process.env.VUE_APP_APIPATH);
}
取得環境變數。
修改 .env 後，需要重新啟動開發環境。
不同環境的 .env
也可以依照不同環境建立：
.env.development
.env.production
例如 package.json：
{
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build": "vue-cli-service build"
}
}
當時的筆記是：如果不同 .env 中有相同名稱的變數，會依照目前執行的 mode 載入對應設定。
移除 Vue CLI
如果需要移除舊版 Vue CLI：
npm uninstall vue-cli -g
2026 年後記
這篇是 2018 年 Vue CLI 3.0 時期留下來的學習筆記，所以介面、建立流程、套件選項與專案結構都是當時的環境。
現在建立新的 Vue 專案已經不會以 Vue CLI 3.0 作為主要方式，因此這篇不適合直接拿來照著建立新的專案。
不過 vue ui、Vue CLI 的 Preset、VUE_APP_ 環境變數，以及當時 Vue CLI 專案的結構，還是很常在舊專案裡看到。
這篇就保留當時的安裝與操作方式，作為 Vue CLI 時期的學習紀錄。