Contents
以 Vue、 GraphQL、 Apollo 2、 Vuex 和 Vuetify 開發一個完整的如 Pinterest / Instagram 功能的全端網頁應用程式
從這 10 小時的課程,你會學到
- 深入瞭解如何使用阿波羅伺服器2( Apollo Server 2 )和阿波羅推進器( Apollo Boost )建立強大的全端應用程式
- 瞭解如何使用 Apollo / GraphQL 處理客戶端和伺服器上的錯誤
- 能夠實現基於會話( session-based )的 JWT 身份驗證到 GraphQL 應用程式
- 整合 Apollo 與 Vuex 以做到更可靠和可擴充的狀態管理( state management )
- Vue-Apollo 使用 Vue-Apollo 實現無限滑動( scrolling )功能
- 使用 Heroku 和 Netlify 佈署全端 JavaScript / GraphQL 應用程式
- 學習如何在客戶端和伺服器上編寫 GraphQL 語言中的查詢( queries )和突變( mutations )
- 使用許多有用的 MongoDB 方法( methods )和功能( features )
- 能夠使用 Vuetify CSS 框架建立富吸引力的精緻 UI
- 熟悉所有最好的 ES6 / 7特性,如非同步 / 等待( async / await )、解構( destructuring )、展開運算符( spread operators )、箭頭函式( arrow functions )等
要求
- 對 Vue 的基本瞭解
- 對 ES6 JavaScript 有基本理解將會有所幫助,但這並不是必須的
課程說明
包括阿波羅伺服器2( Apollo Server 2 )、阿波羅推進器 ( Apollo Boost )和非常新的 Vue CLI 3!
有興趣用 Vue 和 GraphQL 建構下一個級別的應用? 不要再看了!
這門課程是你學習的一站全包指南。
- 使用 Vue 和 GraphQL / Apollo 2完成 CRUD 功能(建立、讀取、更新和刪除)
- 最新最棒的阿波羅( Apollo )工具: Apollo Server 2 、 Apollo Boost 和 Vue Apollo
- 使用新的 Vue CLI 3 建立 / 臨時架 Vue 應用程式、新增外掛並佈署到 Web
- GraphQL 語法,包括型別 (僅大小無方向的純量 / 物件) ,並使用 typeDefs 建立模式( schemas )
- 在客戶端和伺服器上編寫和執行 GraphQL 查詢( queries )和突變( mutations )
- 基本的 Apollo 功能,比如更新功能、樂觀回應( optimistic responses )和重新獲得查詢( refetching queries )
- 使用新的 AuthorizationError 和 formatErrors 功能著手 Apollo Server 2 的錯誤處理
- 基於角色的使用者身份驗證與 JSON Web 令牌( Token )
- 用 Vuex 與 ApolloClient 配合做狀態管理( state management )
- 使用 Vuetify ( Vue 的材質設計組成程式庫 ) 的行動優先( mobile-first )設計做出令人驚嘆 UI
- 在 Vuetify 的幫助下做表單驗證( Form Validation )
- Vue 路由器 (包括保護路由、頁面轉換、路由器道具和動態片段)
- 使用許多 MongoDB 方法( methods )和運算符( operators )來建解析器( resolvers )
- 使用 MongoDB 搜尋功能( Search Functionality )
- 進階的 GraphQL 功能,例如無限滑動( infinite scrolling )
- GraphQL 速記( shorthands )讓模式( schemas )和查詢( queries )簡潔,比如輸入( inputs )和片段( fragments )
- 在 Chrome/Firefox Vue 開發工具擴展套件到 Vue / Vuex / Apollo 除錯上大量工作
- 使用 service Now 佈署 Vue / GraphQL 應用程式
- 高階使用者介面( UI )技巧,包括通知和載入骨架
- 還有更多
我們要建什麼? 課程基於什麼製作?
整個課程在實際應用的背景下,我們將真實地從第一行程式碼開始到佈署在網路上實際做給你看。
我們將建立一個叫做 VueShare 的圖片分享社交應用程式,類似於 Pinterest 或 Instagram。應用程式經過驗證的使用者將能夠喜歡/不喜歡、分享、評論、搜尋、編輯和刪除和圖片相關的貼文。
跟著我們前進,這門課程將如何發展?
在課程開始的時候,我們將討論開始所需的 GraphQL / Apollo 基本概念,然後深入建立我們的應用程式。 我們將建構我們的後端,包含建立一個 GraphQL 伺服器和資料庫(由 MLab 託管) ,以及如何使用 MongoDB 編寫解析器函式( resolver functions )。 然後我們將轉移到前端,建立我們的 Vue 應用程式,並將它與後端連接起來,開發一個介面,用 Vue、 Vuetify 和 Vue Apollo / Vuex 建立客戶端功能。 我們將學習如何使用 Apollo 來編寫和執行查詢( queries )和突變( mutations )來獲取和修改我們需要的資訊。 一旦我們學過並整合我們應用程式的所有基本功能(如上所列) ,我們將繼續將我們的應用佈署到網路上。 在佈署之後,對於那些想要堅持使他們的應用真正準備好的人,我們將介紹一些很酷的功能,使我們的應用更加實用、吸引力和可靠。
我想盡我所能使這門課儘可能全面,同時提供你以互動方式學習新技術的快車道。 GraphQL 在網路開發社群是一個令人興奮的新技術,且新的 Apollo 釋出,如 Apollo Server 2 和 Apollo Boost,使得運用 GraphQL 比以往任何時候都更加容易。
現在是開始使用 GraphQL 的最佳時機,尤其是作為一個 JavaScript 開發者。 加入這個課程,讓我們開始吧!
目標受眾
任何想學習如何使用 Vue 和 GraphQL 建構全端應用程式的人
講師簡介
Reed Barger 全端 Web 開發人員
我是一個充滿熱情的網頁開發者,熱衷於學習和教授我所知道的東西。 我相信通過實踐學習,這種哲學在我教授的每一門課程中都有體現。 我喜歡探索新的網路技術,我的課程專注於給你在今日快速發展的行業中擁有優勢。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To