完整的 Vue 开发人员 2023： 从零到精通（Pinia、Vitest）

Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

这是您学习 Vue（包括所有新的 Vue 3 功能）、从头开始构建大型 Vue 应用程序并在 2023 年受聘成为 Vue 开发人员所需的唯一 Vue.js 教程 + 项目课程。从零到精通 Vue。

课程大纲

本 Vue 课程重点关注效率。因此，您再也不用在令人困惑、过时、不完整的教程上浪费时间了。相反，学习使用 Vue 3 构建专业且现代的应用程序。

您将在良好的陪伴下学习 Vue。

从零到精通的毕业生现在在谷歌、特斯拉、亚马逊、苹果、IBM、Uber、Facebook、Shopify 等顶级科技公司工作。

他们还作为顶级自由职业者在世界各地远程工作时获得报酬。

这可以是你。

今天注册，您还可以加入我们独家的实时在线社区课堂，与数千名学生、校友、导师、助教和讲师一起学习。

积极的。熙。支持。有帮助。友好的。激励人心。基本的。

这些只是学生用来描述 ZTM Discord 的几个词，ZTM Discord 也是 Discord 上最大、最活跃的开发者社区之一。

最重要的是，您将从行业专家那里学习 Vue，他们拥有使用 Vue 并为多伦多和硅谷的公司构建大型应用程序的实际经验。

这个基于项目的课程将向您介绍 2023 年 Vue JS 开发人员的所有现代工具链。并且该课程非常实用，因为我们从头到尾指导您将专业的 Vue 项目发布到生产中。

对于您的 Capstone 项目，您将使用 Vue、Pinia（从 Vuex 更新）、Vue Router、Composition API、Firebase、Vitest、Sass 等构建一个类似于 Spotify 的大型全栈音乐播放器应用程序。

所有代码都是逐步提供的，因此即使您不喜欢一起编码，您也可以访问完整的主项目代码，以便您可以立即将自己的应用程序添加到您的投资组合中。

以下是本课程将涵盖的内容的逐节细分，以帮助您从零到精通 Vue：

我们将从头开始教您 Vue 基础知识和基础知识。然后，我们深入探讨高级主题，以便您可以在未来的任何 Vue.js 项目的架构和工具方面做出明智的决策。

如果您是前端框架新手，或者即使您有 React 或 Angular 背景，您也会喜欢 Vue！

1. 基础知识 –了解 Vue 的基础知识，例如计算属性、方法和观察程序。只需掌握基础知识，您就能够通过事件、绑定和条件渲染来操作文档。您还将学习如何使用官方 Vue 开发人员工具调试应用程序。
2. 项目：透视游乐场 –通过创建 CSS 透视游乐场来构建您的第一个项目。这将使我们有机会通过开发一个可视化 CSS 属性如何操纵元素视角的工具来强化我们在上一节中学到的许多基本概念。
3. 超越基础知识 –深入了解 Vue 框架的内部工作原理。JavaScript 框架如何增加反应性？Vue 如何将模板编译成虚拟 DOM 对象？这将使您深入了解 Vue 如何为现代应用程序提供框架。我们还将讨论生命周期挂钩和组件。
4. 了解工具 –我们将从 Vue 退后一步，讨论一些用于开发应用程序的工具。在您的整个职业生涯中，您将需要使用帮助我们开发应用程序的工具（即 Vite、Sass、PostCSS、ESLint）。我们将讨论如何配置这些工具以及为什么需要它们。
5. 高级组件 –在本节中，我们将使用 Vite 搭建一个 Vue 项目。Vue 的目标是让开发体验尽可能流畅、无痛。Vue 可以帮助我们搭建项目、配置工具和运行服务器。这减轻了 Web 开发中许多更繁琐的任务。我们将能够直接跳到组件中，看看如何通过使用 props、发出事件、槽和动态渲染内容来构建具有组件的应用程序。
6. 过渡和动画 –了解如何通过添加过渡和动画来为应用程序添加一些亮点。动画可以为任何应用程序注入活力。他们还可以通过向用户提供有关其操作的反馈来改善用户体验。我们将讨论如何使用 CSS 和 JavaScript 实现动画。Vue 中支持两者。我们甚至会讨论最新的 Web 动画 API。
7. 项目：测验应用程序 –您将利用迄今为止学到的所有知识来开发测验应用程序。测验是吸引几乎所有行业用户的好方法。
8. 主项目：PINIA 简介（从 VUEX 更新） –最后开始研究本 Vue 课程的主项目，这是一个音乐应用程序（想想 Spotify）！不间断地上传、管理和收听音乐。我们将使用 TailwindCC 来帮助我们设计一个漂亮的现代应用程序。这是受到前端开发社区欢迎的新事物。然后我们将通过使用名为 Pinia 的官方状态库（从 Vuex 更新）来学习状态管理。
9. 主项目：表单验证 –执行表单验证以防止提交无效数据。意外发生。确保检查错误是我们的工作。然后，您将学习如何针对各种场景实施规则。
10. 主项目：身份验证 –在这里您将开始身份验证和注册。用户注册帐户后即可立即登录。我们将使用 Firebase 作为管理和验证用户的后端解决方案。
11. 主项目：路由 –使用 Vue Router 库处理路由。在底层，路由器库使用历史 API 来处理导航。它允许我们在页面之间切换而无需刷新资源。我们将了解如何使用这个库来帮助我们保护路由、添加元字段以及根据当前路由自定义站点的外观。
12. 主项目：上传文件 –开始将文件上传到 Firebase。我们使用 Firebase 验证文件至关重要。我们不希望用户在听音乐时意外下载恶意文件。我们将介绍如何使用 Firebase 规则强制执行验证。完成此操作后，我们将在数据库中存储附加信息。我们甚至将介绍如何在拖放不可用的情况下实施后备解决方案。
13. 主项目：播放音乐 –开始使音频播放器发挥作用。您将实现基本功能，例如播放/暂停、拖动和显示当前持续时间。我们还将允许用户提交评论、浏览音乐和对数据进行排序，从而使网站的其余部分正常运行。
14. 主项目：指令 –了解如何编写自定义指令。指令是可以使用附加属性和方法扩展元素的属性。我们将介绍基础知识并研究高级概念，例如修饰符和参数。
15. 主项目：国际化 –将国际化添加到项目中，以跨多种语言翻译项目。翻译消息有多种方法。有些消息需要格式化或复数化。我们还可以翻译数字（即货币）。我们将了解如何使用几行代码在语言之间进行切换。
16. 主项目：PWA –网络已经转向移动优先的方法。在本部分中，您将添加 PWA（渐进式 Web 应用）功能，通过使用 Workbox 缓存文件并通过 Firebase 保留数据，使您的应用适合移动设备。
17. 主项目：优化 –在将应用程序投入生产之前进行一些最终优化。我们将研究各种技术和工具来帮助我们微调我们的应用程序。我们可以使用 Vite 对文件进行分块并自动注册组件。我们将添加一些功能来帮助用户了解应用程序正在处理请求，以提供友好的用户体验。
18. 主项目：部署 –在本部分中，您将使用单个命令将应用程序部署到 Vercel！快捷方便。
19. 主项目：测试 –我们将讨论如何使用 Vitest 测试项目。单元测试使我们能够单独测试某个功能。这是您将编写的最常见的测试类型。测试中有一些问题可以通过模拟来解决。通过模拟代码，我们将能够隔离功能并测试它们。之后，我们将进行快照测试和端到端测试，将所有内容整合在一起。
20. 组合 API –我们将讨论 Vue 中引入的最新功能（称为组合 API）。这是构建组件的不同方式。虽然 Vue 提供了用于编写组件的简单 API，但也存在一些缺点。组合 API 解决了这些问题。我们将讨论为什么您想要使用组合 API 并了解为什么引入它。

底线是什么？

正如你所看到的，本课程是一个完整且全面的 vue 训练营。

但我们并不是要让您在不理解原理的情况下就只是编写代码，这样当您完成本课程时，除了观看另一个教程之外，您不知道该怎么做……不！

本课程将推动您并挑战您从 Vue 的绝对初学者成为 Vue 开发人员中前 10% 的人 💪。

而且你没有什么可失去的。因为您可以立即开始学习，如果本课程未达到您的预期，我们将在 30 天内向您退款 100%。没有麻烦，也没有问题。