Vue 3: 使用Quasar 2和Pinia创建移动与桌面应用 | Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia)

运用 Vue 3（组合式 API）、Quasar 2 与 Pinia 构建跨平台应用，支持 Web、iOS、Android、Mac 与 Windows。

你将会学到的

• 如何使用 Vue 3 与 Quasar 2 开发财务管理应用
• 如何利用 Pinia（设置商店）管理应用的状态
• 如何将应用部署为 Mac 与 Windows 应用（使用 Electron）
• 如何将应用部署至 iOS 与 Android 平台（使用 Capacitor）

要求

• 对 JavaScript 有基本了解
• 对 Vue 3 及 Composition API 有基本认识
• 建议使用 Mac（但非强制要求）

说明

在这门课程中，你将学会如何使用 Vue 3、组合式 API、Quasar V2 和 Pinia 来构建一个名为 Moneyballs 的精美跨平台财务管理应用，适用于 Web、iOS、Android、Mac 和 Windows。

在 Moneyballs 应用中，我们可以添加收入和支出条目，并跟踪我们的消费情况。

所有的收入条目显示为绿色，所有的支出条目显示为红色，金额以美观的货币格式呈现。

我们能够：

• 查看底部的余额条，它始终显示所有条目的总体余额。
• 通过点击名称或金额字段，就地编辑我们的条目。
• 通过向右滑动标记条目为已支付（并查看已支付条目的余额）。
• 重新排序我们的条目。
• 向左滑动删除我们的条目。

Moneyballs 还有一个设置页面，包含许多不同的设置项。

我们还可以：

• 关闭删除提示 – 当我们在条目上向左滑动时，条目立即被删除。
• 显示累计余额，它显示在所有条目下方。
• 更改货币符号。
• 我们甚至拥有深色模式，采用完全不同的颜色方案。

而且，如果我们退出并重新启动应用（或刷新网页） – 所有的条目数据和设置数据都将被保留。

在构建 Moneyballs 的过程中，你还将使用：

• Pinia 设置商店
• Quasar 插件
• 自定义指令
• 自定义组合式函数
• Capacitor 插件
• 大量 Quasar 组件
• 以及更多……

我们将让这款应用在五个不同平台上运行和工作：

• 网页浏览器
• iOS
• Android
• Mac
• Windows

使用 Quasar（及 Capacitor）生成的 iOS 和 Android 应用实际上可以部署到 App Store 和 Play Store，并通过应用内购买、订阅和广告实现变现。

使用 Quasar（及 Electron）生成的 Mac 和 Windows 应用可以部署到 Mac 和 Windows 商店，或在线分发。

此课程面向哪些人

面向希望创建可部署至各大应用商店（或在线分发）的移动与桌面应用的 Vue 3 开发者。