技術標籤：Vue.jsvuevue.js

有過一點點 Vue2 的經驗，準備系統學習一下 Vue，以最新的 Vue3 為準，記錄一下 Vue 的學習筆記，也希望對其他人有幫助。

文章目錄

• 安裝、使用
• • 當做一個類庫（library）使用
  • 當做框架使用
  • • 安裝 vue3
    • 執行、釋出
• Vue 實戰
• 福利: Vue - Cheat Sheet

安裝、使用

使用 Vue 一般有 2 中方式，一種是把它當做一個類庫（library）使用，一種是當做框架使用，整個專案可以稱作為 Vue 專案。

當做一個類庫（library）使用

<script src="https://unpkg.com/
 
[email protected]"></script>

在 HTML 中，引入 Vue 的核心庫檔案，然後把 Vue 當做一個模板引擎，資料繫結引擎來使用。還有一種應用，就是測試一些 vue 的語法、行為等，建立一個 html 檔案，映入 vue.js，然後測試一些語法等東西。

當做框架使用

當做框架使用，整個專案可以稱作為 Vue 專案，按照 Vue 的要求組織專案檔案結構。對應大中型專案來說，必然要使用射中方式，下文也將以這種使用方式為主。

安裝 vue3

使用 npm 或者 yarn 安裝。

另外，Vue3 新引入了一個 Vite，是一個 Vue3 的在開發模式下，快速打包、執行的客戶端工具，現在還處於 RC 階段。這個也許是 Vue 今後必備的客戶端輔助工具，但是因為還不是很完善，所以仍然推薦使用 VueCLI。

# 安裝 Vue CLI
npm install -g @vue/cli

# 建立Vue3的專案 (e.g. vue3)
vue create vue3

建立 Vue3 的專案,推薦使用手工選擇功能(Manually select features)模式。選擇這個模式後，可以選擇是否使用 typescript, router, vues, unit testing, e2e testing 等。

1. typescript, 看個人愛好和專案需要了。typescript 是趨勢，vue3 也開始用 typescript 重寫了，但感覺 vue 對 typescript 的支援還是有待完善。
2. Router，這個選上吧，必然會用到
3. Vuex。用於狀態管理（state management）， 有人說 vue3 新引入的 reactivity 可以代替這個東西。
4. Linter/ Formatter: 這個用於規範程式碼，建議選上。
5. 其他選項，看個人愛好和專案需求吧。

執行、釋出

# 執行 （可以監控檔案修改，自動重新整理客戶端）
npm run serve

# 打包釋出。（預設釋出到dist目錄下）
npm run build

Vue 實戰

瞭解過一些 Vue 的基本概念後，推薦那幾個小專案練練手。推薦這個 https://public.vuejsworkshops.com/， 有 4 個練習的小專案，一步一步都有講解。並且是基於 Codesandbox （線上開發、預覽），直接上手實現，免去 vue 的安裝、配置等操作。

1. https://public.vuejsworkshops.com/guide/landing/， 將 Vue 作為一個類庫（library）使用。
2. https://public.vuejsworkshops.com/guide/todos/， 一個 Vue 專案，實現一個很流行的 TODO 應用的實踐。
3. https://public.vuejsworkshops.com/guide/podcasts/， 稍高階的一些 Vue 的實踐，包括路由（Vue-Router), 基於 axios 的 REST 的呼叫，以及大型專案中必須的狀態管理-Vuex。
4. https://public.vuejsworkshops.com/guide/vuelidate/, 基於 vuelidate library，實現表單（FORM）的客戶端驗證。

福利: Vue - Cheat Sheet

短小精悍的 Vue 的總結(Cheat Sheet)：

1. Vue: https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf
2. Vue3: https://www.vuemastery.com/pdf/Vue-3-Cheat-Sheet.pdf