21 个 Vue.js 学习示例项目（开源，适合初学者到中级水平）

这篇文章最初发表于https://www.devaradise.com/vue-example-projects

Vue.js是与React.js和 Angular并列的最流行的 JavaScript 框架之一。它旨在逐步采用，并且仅专注于视图层。

它有非常好的文档和Vuemastery和Vueschool的视频课程，可以帮助您学习 Vue.js 的基础知识。

然而，仅仅学习文档和教程是不够的。你还应该学习 Vue.js 的示例项目，了解人们如何使用它以及某些情况下的最佳实践。

查看示例项目还将鼓励您实践从教程中学到的知识。

在这篇文章中，我将分享我从 Github 上整理的 Vue.js 示例项目列表。我按照从初级到中级的顺序对它们进行了排序。

相关文章

• 21 个 React 示例项目（开源，初级至中级）
• 21 个 Flutter 示例应用（开源，初级-中级）

如何学习 Vue.js 示例项目/案例研究？

在您选择示例项目之前，这里有一些从示例项目中学习的技巧。

1. 一次只选择一个项目

Github 上有如此多的开源项目，我们常常会感到不知所措。没关系。

但是，当你真想从这些项目中学习时，千万不要一次性学会。 人类的大脑不是设计来同时处理多项任务的。

你应该筛选一下，只选择一个你真正想学的项目。学完这个项目后，再选择下一个项目。

2. 复制代码，但不要复制粘贴

有了示例项目，你可能会认为只需阅读代码就能学会。不，你不需要。

你应该自己重写，而不是直接复制粘贴。这听起来可能很琐碎，但相信我，当你重写代码时，你会发现更多。

3.保持好奇心，了解代码的工作原理

在重写过程中，你会发现一些你不熟悉的代码。

当这种情况发生时，请保持好奇心，去了解这些代码的工作原理。因为这可能会增加你的知识。

4. 尝试并添加自己的口味

找到一些不熟悉的代码后，就对它们进行一些实验。修改它们，看看它是否仍然有效，并再次找出原因。

随着你学习的深入，你还可以添加自己的代码。将其与基础代码相结合。它可以是样式，也可以添加更多功能。

经过足够的修改后，您可以将其作为您的作品集，当然要提及您使用的示例项目。

5. 保持耐心并保持专注

最后，同样重要的是，学习时要有耐心。不要着急，保持专注。这需要时间，但值得。

祝你好运！

有哪些 Vue.js 示例项目可以学习？

现在，你可以从以下项目中选择一个进行学习。我按照难度从简单到中等的顺序排列了它们。

请记住，一次只选择一个项目来学习！

1. 使用 Composition API 的 Todo 应用

2. Vue Todo 应用

3. Vue 计算器

4. Vue 用户注册与登录

5. Vue 示例

6. Vue Hackernews

7. Vue股票交易员

8. Vue Trello

9. Vue 聊天

10. Vue Gmail 克隆

11. Vue Google Keep 克隆

12. Vue Slack 克隆

13. Vue Quasar 管理员

14. Vue 管理模板

15. Vue Netflix 克隆版

16. Vue Reddit 克隆

17. Vue RealWorld 示例

18. Vue 在线音乐播放器

19. Vue Hackernews 2.0

20. Vue Node.js Youtube 克隆

21. Jira 克隆

~~

您知道其他 repos 吗？

如果您知道其他值得在此提及的 Github 存储库，请随时在评论部分分享它们。

该存储库应该是：

• 一个 Vue 示例项目
• 有一个演示页面，或者至少有一些截图
• 工作时没有出现重大控制台错误

谢谢。

编码愉快！