Vue 2.0 使用的是 Options API，不過 Vue 3 新增了 Composition API。

Options API

所有功能依據程式邏輯進行拆分

以下的 data、methods、computed、created 都屬於程式邏輯。

所有功能依據程式邏輯進行拆分，對於初學者比較容易學習。Options API 這麼好用，為什麼 Vue 3 還要新增 Composition API ?

其實 Options API 還是有缺點，會把商業邏輯拆分至各處。尤其在元件功能越來越多時更明顯，會發現同一個商業邏輯被拆分在同地方，時間一久就不利維護。

而 Vue 3 這次新增的 Composition API 就可以把商業邏輯、功能集中在同一區塊。

Vuex 主要的核心概念

• state：存放所有共享資料的地方。
• actions：處理非同步。
• mutations：用於變更 store 的資料數據，還能集中監控所有數據的變化。
• getter：只進行包裝數據。

• Vuex 文件

什麼是 Vuex ?

用來管理前端網頁資料狀態，適合用來開發大型專案。
可以方便做為元件之間資料的共享，是實現元件全域狀態管理的一種機制。

Vuex 屬於單向資料流

vue-loading-overlay 套件

npm vue-loading-overlay
cdn vue-loading-overlay

loading 樣式

loading.io

在根目錄新創建 vue.config.js 檔案以及deploy.sh 檔案

• GitHub Pages 手動推送更新

1. 新增 vue.config.js 檔案

1
2
3
4
5

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
      ? '/你的 repository 名稱/'
      : '/'
}