2023 完整的 Vue 精通課程（包括Vuex、Composition API、Router）

Contents

Vue 3 開發的終極指南! 建構大規模的應用程式並部署到營運環境。從零到精通!

從這 28 小時的課程，你會學到

建構企業等級的 Vue 應用程式並部署到營運中
檔案上傳、測試、PWA、國際化、Vue 3 的認證
學習如何像高階開發人員一樣建構反應性強、效能好的大規模應用程式
學習 Vue 3 的最新功能，包括 Composition API、Vuex、Vue Router等
學習使用 TailwindCSS、Sass、CSS 動畫和過場特效來建構漂亮的應用程式
從頭開始掌握 Vue 開發者的最新生態系統
成為前 10% 的 VueJS 開發者
在你的應用程式中使用 Vuex 進行狀態管理
學會在效能和可擴充性方面進行權衡比較
設定認證和使用者賬戶
使用 Firebase 來建構全端應用程式
透過做出良好的架構決策和幫助團隊中的其他人來學習領導 Vue 專案
掌握 Vue 設計模式
使用 Vue Router 進行路由選擇
將應用程式轉換為漸進式 Web 應用程式
用 Jest、快照測試、甚至 E2E 測試來測試你的應用程式
使用最新的 ES6/ES7/ES8/ES9/ES10/ES11 JavaScript 來編寫乾淨的程式碼
瞭解為什麼 Vue 在開發者中的受歡迎程度超過了 React 和 Angular!

要求

基本的 HTML、CSS和 JavaScript 知識
你不需要任何關於 Vue 或其他 JS 框架的經驗!

課程說明

剛剛釋出的2022年 Vue 3 的所有新功能! 加入一個由超過 400,000 名開發者組成的即時線上社群，以及由在矽谷和多倫多實際使用過 Vue.js 的業界專家教授的課程。

本課程使用最新版本的 Vue，重點在於效率。再也不用在混亂的、過時的、不完整的課程上花時間了。Andrei 課程的畢業生現在在谷歌、特斯拉、亞馬遜、蘋果、IBM、摩根大通、Facebook+其他頂級科技公司工作。

我們向你保證，這是關於 Vue 的最全面的線上資源。這個基於專案的課程將在2021年向你介紹一個 Vue JS 開發者的所有現代工具鏈。在此過程中，我們將使用 Vue、Vuex、Vue Router、Composition API、Firebase、Jest、Sass和更多工具，建立一個類似 Spotify 的大型音樂播放器應用程式。這將是一個使用 Firebase 的全端應用程式。

所有的程式碼都會逐步提供，即使你不喜歡程式設計，你也會得到完整的主專案程式碼，所以任何報名參加課程的人都會有自己的專案，可以馬上放到他們的作品集上。

該課程將是非常實用的，因為我們將引導你從頭到尾釋出一個專業的 Vue 專案，並將其投入營運。我們將從最開始教你Vue 的基礎知識，然後進入高階主題，這樣你就可以在你未來的任何 VueJS 專案中對架構和工具做出正確的決定。如果你是前端框架的新手，甚至是來自 React 或 Angular 背景的人，你都會愛上Vue!

以下是該課程將涵蓋的內容：

基礎知識 – 在這一部分，我們將學習 Vue 的基礎知識，如計算屬性、方法和觀察者。有了這些基礎知識，我們就能用事件、繫結和條件渲染來操作文件。我們還將學習如何用官方的 Vue 開發者工具來除錯一個應用程式
專案-透視遊樂場–在這一部分，我們將透過建立一個 CSS 透視遊樂場來建立我們的第一個專案。這將給我們一個機會，透過開發一個視覺化的 CSS 屬性如何操縱一個元素的透視的工具，來鞏固我們在上一節中學到的很多基本概念
超越基本原理 – 在這一節中，我們將深入瞭解 Vue 框架的內部工作原理。JavaScript 框架是如何增加反應性的？Vue是如何將樣板編譯成虛擬 DOM 物件的？這將使我們深入瞭解 Vue 是如何為現代應用程式提供一個框架的。我們還將討論生命週期 Hook 和元件
學習工具 – 在這一節中，我們將從 Vue 中抽身出來，談論一些開發應用程式的工具。在你的職業生涯中，你需要處理幫助我們開發應用程式的工具（例如，Webpack、Sass、PostCSS、ESLint）。我們將談論這些工具是如何配置的，以及為什麼它們是必要的
高階元件 – 在本節中，我們將使用 Vue CLI 來建構一個專案。Vue 的目標是使開發經驗儘可能地順利和無痛。Vue 可以幫助我們搭建一個專案的鷹架，配置工具，以及執行伺服器。這減輕了很多 Web 開發中比較繁瑣的任務。我們將能夠直接跳到元件中，看看我們如何透過使用道具、發射事件、槽和動態渲染內容，用元件來架構一個應用程式
過場效果和動畫 – 在這一節中，我們將學習如何透過新增過場效果和動畫為應用程式增加一些活力。動畫可以為任何應用程式注入活力。它們還可以透過向用戶反饋他們的操作來改善使用者體驗。我們將討論如何用 CSS 和JavaScript 實現動畫。Vue 中支援這兩種方式。我們甚至會討論最新的 Web Animations API
專案 – 測驗APP – 在這一節中，我們將利用到目前為止所學的一切來開發一個測驗應用程式。測驗是吸引幾乎所有行業的使用者的好方法
主專案 – VUEX 簡介 – 在本節中，我們將開始為本課程的主專案工作，這是一個音樂應用程式上傳、管理和收聽音樂，不受任何干擾。我們將使用 TailwindCC 來幫助我們設計一個漂亮的現代應用程式。這是一個新的專案，正在被前端開發社群所接受。之後，我們將透過使用名為 Vuex 的官方狀態程式庫來學習狀態管理
主專案 – 表單驗證 – 在本節中，我們將進行表單驗證，以防止無效資料被提交。意外發生了。我們的工作就是要確保檢查錯誤。我們將學習如何執行各種情況下的規則
主專案 – 認證 – 在這一部分，我們將開始認證和註冊。使用者在註冊賬戶後將能夠立即登入。我們將使用 Firebase 作為後端解決方案來管理和驗證使用者
主專案 – 路由 – 在這一節中，我們將用 Vue Router 程式庫來處理路由問題。在下面，路由器程式庫是使用歷史 API 來處理瀏覽。它允許我們在不重新整理資產的情況下在頁面之間切換。我們將看看我們如何使用這個程式庫來幫助我們守護路由，新增元欄位，並根據當前的路由來客製化我們網站的外觀
主專案 – 上傳檔案 – 在這一部分，我們將開始向 Firebase 上傳檔案。我們用 Firebase 驗證檔案是至關重要的。我們不希望使用者在聽音樂時不小心下載了一個惡意的檔案。我們將介紹如何用 Firebase 規則來執行驗證。這樣做之後，我們將在資料庫中儲存額外的資訊。我們甚至會介紹如何實現一個後備解決方案，以防拖放功能不可用。
主專案 – 播放音樂 – 在這一部分，我們將開始使音訊播放器發揮作用。我們將實現一些基本功能，如播放/暫停、重新整理和顯示當前的持續時間。我們將透過允許使用者提交評論、瀏覽音樂和對資料進行分類，使網站的其餘部分也能發揮作用。
主專案 – 指令 – 在這一節中，我們將簡要地學習如何編寫客製化指令。指令是一種屬性，可以用額外的屬性和方法來擴充一個元素。我們將介紹基礎知識，並看看高階概念

主專案 – 國際化 – 在這一節中，我們將把國際化新增到一個專案中，以便將一個專案翻譯成多種語言。有不同的方法來翻譯一個資訊。有些訊息需要格式化或複數化。我們還可以翻譯數字（即貨幣）。我們將看看如何用幾行程式碼在語言之間切換。
主專案 – PWA – Web 已經轉向行動優先的方式。在這一節中，我們將新增 PWA（漸進式 Web 應用程式）的功能，透過使用 Workbox 來快取檔案，並透過 Firebase 來永續化資料，使我們的應用程式對行動端友好
主專案 – 最佳化 – 在這一節中，我們將在將我們的應用程式運送到營運環境之前進行一些最後的最佳化。我們將研究各種技術和工具，以幫助我們微調我們的應用程式。我們可以使用 Webpack 對檔案進行分塊並自動註冊元件。我們將新增一些功能，幫助使用者瞭解應用程式正在處理一個請求，以獲得友好的使用者體驗
主專案 – 部署 – 在這一節中，我們將用一個命令把我們的應用程式部署到 Vercel 上! 快速而簡單
主專案 – 測試 – 在這一節中，我們將討論如何用 Jest 測試一個專案。單元測試使我們能夠孤立地測試一個功能。這是你要寫的最常見的測試類型。測試中有一些問題可以透過 mocking 來解決。透過 mocking 程式碼，我們將能夠隔離功能並測試它們。之後，我們將進入快照測試和 E2E 測試，將所有的東西結合起來
COMPOSITION API – 在這一節中，我們將討論 Vue 中引入的最新功能，稱為組合 API。這是一種建構元件的不同方式。雖然 Vue 為編寫元件提供了一個簡單的 API，但還是有一些不足之處。組合 API 解決了這些問題。我們將討論為什麼你會想使用組合 API，並理解它被引入的原因

本課程並不是讓你在不理解原理的情況下就跟著編寫程式碼，這樣當你完成課程後，除了看另一個教程，你不知道該做什麼。不是的！本課程將推動你並挑戰你，讓你從一個絕對的 Vue 初學者變成一個在 Vue 開發者中排名前10%的人。

我們向你保證，這是關於 Vue JS 的最全面的線上課程! 請看一下課程大綱影片，看看我們將涵蓋的所有主題，我們將建立的所有專案，以及你將學習的所有技術，以成為一個頂級的 Vue 開發者!

裡面見!

目標受眾

有興趣超越普通 “初學者 “教程的學生
想學習 Web 開發者最需要的技能的程式設計師
想成為前 10% 的 Vue 開發者的開發人員
想獲得可擴充的大型應用程式的工作經驗的學生
希望超越基礎知識的訓練營或線上教程畢業生

講師簡介

Andrei Neagoie 由高階軟體開發人員轉為講師 ( 更多講師主講課程介紹 )

Andrei 是 Udemy 網頁程式開發課程評價很高的教師，也是成長最快的教師之一。他的畢業生已經進入世界上一些最大的科技公司工作，比如蘋果、谷歌、摩根大通、 IBM 等等。 . 多年來，他一直在矽谷和多倫多擔任高階軟體開發人員，現在正在利用他所學到的一切，來教授程式設計技能，並幫助你發現作為一名開發人員在生活中所能提供的驚人的就業機會。

作為一個自學的程式設計師，他知道有大量的線上課程、教程和書籍過於冗長，不足以教授正確的技能。大多數人在學習一個複雜的主題時會感到麻痺，不知道從哪裡開始，或者更糟糕的是，大多數人沒有20,000美元用於程式設計訓練營。 程式設計技能學習應該是所有人可以負擔的起，並且對所有人開放。教材應該教授現代生活技能，不應該浪費學生寶貴的時間。 Andrei 從為財富500強企業、科技創業公司工作中學到了重要的經驗，甚至開創了自己的事業，他現在 100% 地投入時間教授其他人有價值的軟體開發技能，以便掌控他們的生活，在一個充滿無限可能性且激動人心的行業中工作。

Andrei 向你保證，沒有其它課程有這麼全面和詳細的解釋。他認為，為了學習任何有價值的東西，你需要從基礎開始，發展樹的根本。只有從那裡你才能學到與基礎相關的概念和具體技能(葉子)。當以這種方式建立時，學習將會呈現指數級的成長。

以他的教育心理學和程式設計經驗，Andrei 的課程將帶你瞭解複雜的主題，你從來沒有想過是可能的。

課程中見！

Luis Ramirez Jr 前端軟體工程師/講師

Luis 是一名軟體工程師，在 Web 應用開發方面有十年的經驗。在他的職業生涯中，他一直在建構可靠的、經過戰鬥考驗的、安全的、可擴充的和高效能的解決方案。作為一名工程師，開發能夠提供流暢使用者體驗的應用程式始終是首要任務。

大多數課程會教你 “如何”，但從來沒有教你 “為什麼”。Luis 認為，理解程式設計中的核心和關鍵概念將使你成為當今市場上有競爭力的工程師。他在這裡透過解讀其他講師可能會忽略的低階概念來幫助你完成這一旅程。