• 課程時長

    4 小時 0 分

  • 課程級別

    中高階

  • 授課語言

    中文

這堂課你將會學到

  • 如何使用 Vue 開發具有SEO效果的網站
  • 如何去規劃 Nuxt 專案
  • 了解 Nuxt 的每個細節以及使用方式
  • 如何定義網址且正確使用路由
  • 拆切分組建的技巧

章節目錄

  • 1

    範例下載

    • 範例下載
  • 2

    Nuxt - 自動化 Router 配置

    • 馬上來新增常用的 Header 跟 Footer

    • NuxtLink

    • 嵌套式 Router

    • 動態 Router 配置 - 1

    • 動態 Router 配置 - 2

    • 動態 Router 配置 - 3

    • 動態 Router 配置 - 4

    • 客製化 Loading

    • Error 錯誤處理頁面
  • 3

    第 2 章 Vue 的 SSR 原理

    • 單元 1 - 什麼是SPA? 什麼是SSR?

    • 單元 2 - 什麼是 Nuxt ?

    • 單元 3 - Nuxt SSR 原理解析
  • 4

    第 3 章 開始使用 Nuxt 吧

    • 單元 1 - Nuxt 安裝及設定

    • 單元 2 - Nuxt 架構解析 - layouts & pages

    • 單元 3 - Nuxt 架構解析 - static & assets

    • 單元 4 - Nuxt 架構解析 - store & plugins & middleware

    • 單元 5 - Nuxt 的生命週期表

    • 單元 6 - 關於接下來課程內容開發的重要事項

    • 單元 7 - Nuxt 生命週期 - asyncData 與 data

    • 單元 8 - GET API SSR實作

    • 單元 9 - asyncData 重要事項

    • 單元 10 - Nuxt 生命週期 - fetch

    • 單元 11 - fetch 的狀態處理 - 1

    • 單元 12 - fetch 的狀態處理 - 2

    • 單元 13 - fetch 的狀態處理 - 3

    • 單元 14 - fetch 的狀態處理 - 4

    • 單元 15 - fetch 生命週期執行順序

    • 單元 16 - SEO - Global head Settings

    • 單元 17 - SEO - Local head Settings

    • 單元 18 - nuxt.config.js 設定 - ssr
  • 5

    第 4 章 Nuxt - 自動化 Router 配置

    • 單元 1 - 馬上來新增常用的 Header 跟 Footer

    • 單元 2 - 重點整理 - 如何在 Nuxt 內使用 SASS

    • 單元 3 - NuxtLink

    • 單元 4 - 嵌套式 Router

    • 單元 5 - 重點整理 - Nuxt Router 對照

    • 單元 6 - 動態 Router 配置 - 1

    • 單元 7 - 動態 Router 配置 - 2

    • 單元 8 - 動態 Router 配置 - 3

    • 單元 9 - 動態 Router 配置 - 4

    • 單元 10 - 客製化 Loading

    • 單元 11 - Error 錯誤處理頁面
  • 6

    第 5 章 整合 & 製作Nuxt 套件

    • 單元 1 - Plugins基本介紹

    • 單元 2 - 自己撰寫Plugins - 1

    • 單元 3 - 自己撰寫Plugins - 2

    • 單元 4 - 整合現有的 Nuxt Plugins

    • 單元 5 - 第三方套件整合 Nuxt

    • 單元 6 - 重新包裝 cookie 與 localStorage 等方法 - 1

    • 單元 7 - 重新包裝 cookie 與 localStorage 等方法 - 2

    • 單元 8 - 重新包裝 cookie 與 localStorage 等方法 - 3
  • 7

    第 6 章 Vuex 複習與 API 架構使用

    • 單元 1 - 關於 Store 資料夾

    • 單元 2 - asyncData 取得 Store資料

    • 單元 3 - Nuxt 之中新手常犯的 Vuex 錯誤

    • 單元 4 - Vuex module 更簡單

    • 單元 5 - API 架構設計 - 獨立 API 管理

    • 單元 6 - API 架構設計 - try catch & 錯誤處理

    • 單元 7 - Plugins 注入Vuex
  • 8

    第 7 章 功能案例實作 - 登入流程開發

    • 單元 1 - 登入專案解析

    • 單元 2 - 會員登入 API 串接

    • 單元 3 - token 儲存

    • 單元 4 - headers Authorization token

    • 單元 5 - token 錯誤處理
  • 9

    第 8 章 常見開發中問題處理

    • 單元 1 - 開發階段 CORS(跨網域) API 處理

    • 單元 2 - 如何安裝本地 https 憑證
  • 10

    第 9 章 課程加碼 - 功能案例實作 - i18n 多國語系切換

    • 單元 1 - i18n 安裝與配置

    • 單元 2 - 切換多國語系

    • 單元 3 - 語系傳入參數

    • 單元 4 - 文字的設定檔拆分