自動播放
自動完成
上一堂課程
完成並繼續課程
2611845
2024 Nuxt 實戰：Vue 工程師的必修課
課程公告
影音授權時間
直播錄影
開學典禮 - 直播錄影 (46:13)
第一週直播：Nuxt 專案起步走 - 上 (115:55)
第一週直播：Nuxt 專案起步走 - 下 (22:49)
第二週直播：Nuxt 頁面架構設計 - 上 (66:42)
第二週直播：Nuxt 頁面架構設計 - 下 (55:48)
第三週直播：Nuxt 元件管理 - 上 (77:20)
第三週直播：Nuxt 元件管理 - 下 (43:33)
第四週直播：Nuxt 狀態管理 Pinia - 上 (60:39)
第四週直播：Nuxt 狀態管理 Pinia - 下 (70:15)
第五週直播：Nuxt 部署及設定 - 上 (56:04)
第五週直播：Nuxt 部署及設定 - 下 (75:31)
從 Option API 轉換為 Composition API
Composition 章節提醒
什麼是 Composition API (3:48)
雙向綁定機制 Proxy (11:56)
使用 setup 取代 Options API (5:50)
使用 reactive 定義資料 (4:48)
使用 ref 定義資料 (6:02)
reactive 與 ref 如何選擇 (8:24)
Composition 中的方法定義 (6:05)
在 Composition API 中運用 Options API 的方法 (9:19)
setup 中的 Props (5:53)
在 composition 中運用 emit 技巧 (5:20)
ref 取得 $refs 的 DOM 物件 (4:25)
Provider 與 Inject 的方法導入 (5:15)
在 Composition 中運用 Watch 方法 (9:48)
Watch 與 Computed 的結合體，WatchEffect (8:09)
最終練習，Composition Kata (6:03)
Composition 課程延伸章節資源
在 Vite 環境中使用 Script setup 撰寫 Composition API
Vue 在 CDN 運作方式 (10:58)
安裝 Git 以及 Node.js
使用 Vite 建構 Vue 環境 (7:17)
Vite 的專案結構說明 (14:17)
Vite Build 出靜態檔案 (5:19)
部署到 GitHub Pages (8:50)
從 Promise 轉換至 Async/Await
使用 Async Function 改寫實戰範例 (7:12)
撰寫高可用性高的錯誤捕捉 (13:40)
Async Function 與 Promise 之間的關聯性 (5:19)
為什麼要使用 Async 與基本介紹 (9:47)
Nuxt3 環境安裝
講義下載
NVM 的安裝 (1:54)
Nodejs 安裝 (2:57)
Nuxt3 起手式
創建一個新的專案 (3:50)
儲存縮排設定 (2:30)
架構解析 - pages 的使用，新增頁面 & Nuxt3 Commands add 使用 (5:44)
架構解析 - 關於 Nuxt3 的 layouts (3:57)
架構解析 - public & assets 的差異 (2:04)
架構解析 - Components & Auto Imports - 1 (2:41)
架構解析 - Components & Auto Imports - 2 (3:20)
架構解析 - Components & Auto Imports - 3 (4:21)
架構解析 - Components & Auto Imports - 4 (3:37)
架構解析 - Composables & Auto Imports - 1 (5:08)
架構解析 - Composables & Auto Imports - 2 (1:25)
架構解析 - 關於我們的 Store 與 Pinia (7:44)
Volar 的提示設定 (1:20)
架構解析 - Plugins 第一種方式 - provide (4:40)
架構解析 - Plugins 第二種方式 - directive (6:41)
架構解析 - Plugins 第三種方式 - use (3:44)
架構解析 - plugins 的中間檔名 (3:02)
ClientOnly (2:32)
架構解析 - middleware ( 匿名 ) (3:17)
架構解析 - middleware ( 具名 ) (2:34)
架構解析 - middleware ( 全域 ) (2:06)
架構解析 - server : api (4:12)
架構解析 - server : routes (1:55)
架構解析 - server : middleware (3:27)
server middleware 的限制 (1:06)
SEO and Meta
Global head Settings (2:30)
useHead 的使用 (2:22)
useSeoMeta & useServerSeoMeta - 1 (3:45)
useSeoMeta vs useServerSeoMeta - 2 (5:02)
載入外部的CSS跟JS (3:02)
載入外部的JS與tagPosition (2:20)
SEO Meta Components (2:19)
Nuxt3 Server Side Rendering
useFetch (3:14)
從 ofetch 到 $fetch，Nuxt3 推薦的非同步處理方式 (1:42)
useFetch options 解析 (1:09)
useFetch interceptors 解析 (3:39)
useAsyncData (4:54)
$fetch 與 ofetch 解析 (4:24)
重新獲取資料的兩個方法 (5:06)
多個 API 請求 (3:54)
useAsyncData + axios 來抓資料 (5:15)
Nuxt3 自動化 Router 配置
關於NuxtLink (5:49)
嵌套式Router (4:47)
useRouter & useRoute (2:46)
動態 Router 配置-1 (3:07)
動態 Router 配置-2 (4:59)
動態 Router 配置-3 (7:14)
動態 Router 配置-4 (6:15)
客製化換頁 Loading - 1 (3:45)
客製化換頁 Loading - 2 (2:22)
404 頁面處理 (3:16)
全域資料管理 - Pinia 來啦！
什麼是 pinia？ Vuex 暫時退場！ (2:58)
新建立一個 Store (2:45)
範例實作 1 - 從 useAsyncData 到 Pinia (9:44)
範例實作 2 - 資料送出同步狀態 (4:57)
範例實作 3 - 錯誤處理 (4:44)
Pinia 的小技巧 - storeToRefs (5:20)
Pinia 的兩種寫作風格？該怎麼選？ (2:05)
Pinia Store 的交互使用 (2:32)
ENV 環境變數的處理
為什麼需要環境變數？ (1:54)
如何在 Nuxt3 專案定義環境變數（ 1 - 1 ） (6:53)
如何在 Nuxt3 專案定義環境變數（ 1 - 2 ） (7:14)
如何在 Nuxt3 專案定義環境變數（2） (3:41)
常見開發中問題處理
如何安裝本地 https 憑證 (5:46)
開發階段 CORS(跨網域) API 處理 (4:14)
nuxt.config 區分開發環境 (5:10)
關於Composables的使用限制（超重要） (6:36)
功能案例實作 - 全站共用的 Dialog 組件開發
Dialog 專案解析 (1:51)
Dialog 需求解析 (1:40)
Dialog 開啟跟關閉 (5:22)
Dialog 內容與 callback (5:12)
Dialog 內容的預設值 (3:38)
功能案例實作 - 登入機制開發
登入機制解析 (1:29)
專案結構解析 (1:52)
如何儲存 token (4:58)
驗證 token 權限 (5:52)
token 異常處理 (5:02)
token 儲存欄位調整 (2:04)
多專案登入處理 (6:55)
共用登入頁面 (7:31)
架構解析 - Plugins 第一種方式 - provide
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程