Vue.js 是當代最受歡迎的前端框架之一,易學、彈性高、社群資源充足。以下提供「從零到上線」的學習路線與實做清單,搭配官方文件與常用套件,幫你有效率地完成第一個可維護的 Vue 專案。
0. 先備知識與環境準備
- 語言基礎:HTML、CSS、ES6+(let/const、解構、箭頭函式、模組化)。
- 開發環境:安裝 Node.js LTS、VS Code(裝
Volar、ESLint、Prettier外掛)。 - 官方資源: Vue.js 官方文件、 Vue Router、 Pinia、 Nuxt
1. 從 Hello World 到專案骨架
- 快速啟動:使用 Vite 建置:
npm create vite@latest my-app -- --template vue→npm i→npm run dev。參考 Vite 指南。 - 認識單檔元件(SFC):
.vue的、、三區塊。 - 必備工具:加入 ESLint、 Prettier,統一程式風格與規範。
2. Vue 核心概念(打地基)
- 資料繫結:
{{ }}、v-bind、v-model、條件/列表渲染(v-if、v-for)。 - 事件與資料流:
@click、props(父→子)、emit(子→父)。 - 組件化:切小元件、命名規範、可重用性與
slots(含named、scoped)。 - 反應式系統:
ref、reactive、computed、watch、生命週期(onMounted等)。 - Composition API:
、組合式函式(composables)設計與封裝。
3. 路由與狀態管理(進入應用級)
- 路由:導入 Vue Router,設定 routes、動態路由、路由守衛(Auth 檢查)、巢狀 & 命名 view。
- 狀態:使用 Pinia 建立 store、getters、actions;分模組管理(user/cart/ui)。
- API 存取:以
fetch或 Axios,封裝useApi()composable(攔截器、錯誤處理、Token 注入)。
4. 表單、驗證、UI 與可用性
- 表單處理:多層
v-model、computed驗證狀態、重置/送出流程。 - 驗證套件: VeeValidate 或 async-validator。
- UI 套件: Element Plus、 Naive UI 或 Vuetify。
- 常用工具: VueUse(實用 composables 集合)。
5. 專案實作(建議題目)
- Level 1:待辦清單(CRUD、Pinia 儲存、LocalStorage)。
- Level 2:部落格/文章清單(路由、分頁、搜尋、Axios 取後端 API)。
- Level 3:電商小店(商品列表、購物車、結帳表單、驗證、路由守衛)。
- Bonus:以 Nuxt 做 SSR/SSG,強化 SEO 與首屏速度。
6. 測試、品質與部署
- 單元測試: Vitest + Vue Test Utils 測元件邏輯與渲染。
- 型別:逐步導入 TypeScript(Props/Emits 類型、composables 回傳類型)。
- 部署:Vite 打包
npm run build→ 部署到 Vercel / Netlify / GitHub Pages。
7. 效能最佳化與進階主題
- 效能:拆分路由區塊、動態匯入、
keep-alive、v-memo、避免不必要watch。 - 狀態規劃:區分本地 UI 狀態與全域業務狀態,避免「一切都塞 Pinia」。
- 可維護性:建立
/components、/composables、/stores、/services、/views的清晰結構。 - 架構升級:SSR/SSG(Nuxt)、多語系(vue-i18n)、權限控管、PWA。
8. 30 天學習計畫(可複製)
- D1–D3:Vite 專案+SFC 基礎+資料繫結與事件。
- D4–D7:Composition API、props/emit、slots、生命週期。
- D8–D12:Vue Router、Pinia、API 封裝。
- D13–D18:表單與驗證、UI 套件、專案頁面切版。
- D19–D24:完成 Level 2 專案、加入測試。
- D25–D27:最佳化、錯誤追蹤(Sentry 選配)。
- D28–D30:部署、撰寫 README、Demo 影片。
常見踩雷與解法
- 所有狀態都放全域:只把「跨頁且長存」的狀態放 Pinia,其餘採本地 state。
- 過度使用 watch:能用
computed就別用watch;需要副作用時再使用。 - 無錯誤邏輯:在 composable 的 API 加入 try/catch 與回傳統一錯誤格式。
- 樣式洩漏:元件使用
,跨專案樣式以設計系統或原子化工具管理。
推薦學習資源
結語
學 Vue.js 的關鍵是「邊學邊做」。先把基礎打穩,再用路由與狀態把頁面串起來,接著做一個能上線的小專案並部署。完成第一輪後,你就具備把任何前端需求拆解、實作、上線的能力了。