Contents
使用 Vuetify、Vue JS 和 Vuex 創建一個華麗的 Todo 應用程式 – 使用許多不同的 Vuetify 組合元件!
從這 5.5 小時的課程,你會學到
- 如何使用 Vuetify、Vue JS 和 Vuex 創建一個漂亮的應用程式
- 如何使用 State、Mutations、Actions 和 Getter 將核心資料和邏輯移動到 Vuex Store
- 如何將應用程式分解為子組件
- 如何使用許多 Vuetify 組合元件,例如列表、文本字段、對話框、日期選擇器、Snackbars 和選單
- 如何使用 Vue Router 和 Navigation Guards
- 如何使用 IndexedDB 和 Localbase 使資料在用戶的瀏覽器中持久存在
- 如何在真實的 iOS 和 Android 設備上測試和除錯應用程式
要求
- 需要基本的 HTML、CSS 和 JavaScript 知識
- 基本的 VueJS 知識有幫助,但不是必需的
課程說明
在本課程中,你將學習如何使用 Vuetify 以及 Vue JS 和 Vuex 從頭開始創建一個華麗的代辦( Todo )應用程式。
Vuetify 是一個非常流行的 Vue UI 框架,它提供了 100 多個質感設計( Material Design )組合元件,可用於創建幾乎任何網站或應用程式。
但是,入門可能很困難,因此在本課程中,你將學習如何從頭開始創建一個美觀、響應迅速的應用程式,該應用程式在桌面和行動設備上看起來都很棒。
你將使用大量 Vuetify 組合元件,例如列表、文本字段、選單、對話框、日期選擇器、Snackbars 等等。
你還將使用 Vuex 來集中應用程式的核心資料和邏輯,設置 State、Mutations、Actions 和 Getter。
你將應用拆分為子組件,以使專案更易於管理。
在我們的課程應用程式 Vuetify Todo 中,我們可以顯示任務列表、添加任務並將任務標記為已完成。
每個任務都有一個選單,可以選擇編輯任務名稱、為任務添加截止日期、刪除任務,甚至可以選擇使用拖放對任務重新排序。
我們甚至可以使用擴展的搜索字段過濾我們的任務。
你將使用 Vue Router 來設置 Pages 和 Routers,這些可以通過 Navigation Drawer 中的鏈接進行導航。
你將使用 IndexedDB 和 Localbase 將所有資料儲存在用戶的瀏覽器中。因此,即使用戶關閉瀏覽器或更新瀏覽器 – 他們的所有資料都會被保留。
你將在真實的 iOS 和 Android 設備上測試、除錯和修復應用程式。
完成後,你將完成的應用程式部署到 Netlify!
目標受眾
任何想要快速開始使用 Vuetify、Vuex 和 Vue JS 的人
講師簡介
Danny Connell 獨立應用程序開發人員和講師
作為一名 Web 開發人員(包括前端和後端),我在英國的多家公司工作了 7 年,在 HTML、CSS、JavaScript、jQuery、PHP 等方面變得非常熟練。
在對應用程式更感興趣後,我作為混合應用程式開發人員工作了 2 年,使用 Angular、Ionic、Vue.js 等技術為慈善部門創建跨平台應用程式。
我創建了自己的成功應用程式 Fudget(適用於 iOS、Android、Mac 和 Windows),它是 iOS 上用戶評分最高的個人理財應用程式,下載量超過 150 萬次。 這最終讓我辭掉了工作,成為一名全職獨立應用程式開發人員,開發自己的應用程式。
我有一個年輕但成功的 YouTube 頻道,我還在那裡分享程式教學。
我非常高興能在 Udemy 分享我的知識!
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
報名參加課程

你必須登入才能發表留言。