2020年学习Vue JS的10种资源

After a few years of working with React, I was getting more and more curious about Vue and its growing ecosystem. I’m thrilled that I now get to dedicate my whole time to it, having recently joined a company that uses Vue for all its front end.

在与React一起工作了几年之后,我对Vue及其不断发展的生态系统越来越好奇。 我很高兴能将自己的全部时间奉献给它,最近加入了一家使用Vue进行前端开发的公司。

What a blast! The learning curve is nothing compared to React’s. It just feels like everything falls into place, and in the end, I find it so much easier than with React to keep the app clean, readable, maintainable, and scalable. This is my very personal opinion, of course, and I still find lots of advantages to using React. However, the pleasure that has come from working with Vue over the last few weeks has, to my own surprise, brought me to a no-going-back point and I’ll be writing a lot more on Vue from now on.

真是个爆炸! 与React相比,学习曲线毫无意义。 感觉就像一切都准备就绪,最后,我发现它比使用React保持应用程序整洁,可读性,可维护性和可伸缩性要容易得多。 当然,这是我个人的看法,我仍然发现使用React会有很多好处。 但是,过去几周与Vue合作所带来的乐趣,令我感到惊讶的是,这使我回到了永不退缩的地步,从现在开始,我将在Vue上写很多东西。

While it’s true that React has the biggest community at the moment, it also comes with a huge opportunity for us developers to play a role in the Vue ecosystem. That will have a great impact since I’m personally convinced that Vue will take up a much larger market share in the coming years.

尽管确实React拥有目前最大的社区,但它也为我们的开发人员提供了在Vue生态系统中发挥作用的巨大机会。 这将产生巨大的影响,因为我个人坚信Vue在未来几年将占据更大的市场份额。

Feel excited? I know I am, and as a start, here are ten great resources to learn Vue.js (without forgetting their very high-quality official documentation) so that you can get on that awesome and promising journey too!

感到兴奋吗? 我知道,并且一开始,这里有10个学习Vue.js的好资源(不要忘记他们非常高质量的官方文档 ),这样您就可以踏上那令人敬畏的前途!

Vue学校 (Vue School)

The Vue School platform is fully dedicated to Vue and is one of the most exhaustive and qualitative I found. Courses start from a very beginner level and bring you all the way to being a hirable Vue.js developer. New courses are added regularly, which helps to stay up to date with the latest additions to the ecosystem. You might have heard of Vue 3, which is going to be huge. Also, a Vue 3 Master Class is a “work in progress” on Vue School.

Vue School平台完全致力于Vue,是我发现的最详尽,最定性的平台之一。 课程从非常初级的水平开始,带您逐步成为一名可租用的Vue.js开发人员。 定期添加新课程,以帮助您及时了解最新添加的生态系统。 您可能听说过Vue 3,它将会非常庞大​​。 此外,Vue 3大师班是Vue学校的“一项正在进行的工作”。

After discovering the basic concepts with the beginner courses, the Vue.js Master Class will get you to the next level. This course will teach you everything there is to know about Vue while building a production-ready forum application using the Vue-CLI, single-file components, Vue router, managing state with Vuex, building Vue plug-ins, adding third-party authentication and a real-time database usage with Firebase (if you’ve checked my other articles, you know my love for Firebase), and a lot more. It offers all this while teaching you the best practices regarding the architecture of a clean, scalable, and maintainable Vue application.

在学习了入门课程的基本概念之后, Vue.js大师班将带您进入更高的层次。 本课程将教您有关Vue的所有知识,同时使用Vue-CLI,单文件组件,Vue路由器,使用Vuex管理状态,构建Vue插件,添加第三方身份验证来构建可用于生产环境的论坛应用程序以及Firebase的实时数据库使用情况(如果您查看了我的其他文章 ,就会知道我对Firebase的热爱),以及更多其他内容。 它提供了所有这些,同时教会了您有关干净,可伸缩和可维护的Vue应用程序体系结构的最佳实践。

Cost: Some courses are free and full access is $25/mo.

费用:有些课程是免费的,完全访问费用为25美元/月。

Image for post
Vue School — The Vue.js Master Class Vue学校 — Vue.js大师班

Vue精通 (Vue Mastery)

If you knew Code School back in the day, you’ll recognize its former founder Gregg Pollack. He’s backed on Vue Mastery by several Vue.js core team members and other highly skilled developers. On top of that, what I love most about Vue Mastery is that Gregg and its team regularly invite Evan You (creator of Vue.js) for in-depth talks about the heart of Vue’s building, how it works, and where it’s heading. It brings invaluable insight into Vue to master it to its core.

如果您早就认识了Code School,就会发现它的前创始人Gregg Pollack。 他支持在Vue公司掌握几个Vue.js核心团队成员和其他高度熟练的开发人员。 最重要的是,我最喜欢Vue Mastery的是Gregg及其团队定期邀请Evan You(Vue.js的创建者)深入讨论Vue建筑的核心,其工作原理和发展方向。 它为Vue带来了宝贵的见识,使Vue成为其核心。

It also starts at the very basics and moves towards more advanced topics at a pace that I found really well balanced.

它也从最基本的内容开始,并朝着更高级的主题发展,以我发现非常平衡的速度进行。

Cost: Some courses are free and full access is $19/mo.

费用:有些课程是免费的,完全访问权限为19美元/月。

Image for post
Vue Mastery Vue精通

Udemy:Vue JS —完整指南(包括Vue Router和Vuex) (Udemy: Vue JS — The Complete Guide (incl. Vue Router & Vuex))

If you’re more of a Udemy learner, there’s a Udemy course by one of my favorite instructors, Maximilian Schwarzmüller. This is a project-based course covering every topic from the very basics. I personally didn’t try it, but I’ve followed several courses by Maximilian and always enjoyed the quality of his courses. Also, it has a 4.7/5 score out of almost 40K grades, making it the top Vue.js course on Udemy right now. If you’ve followed it, don’t hesitate to share your thoughts on it in the comments.

如果您更多地是Udemy学习者,那么我最喜欢的老师之一MaximilianSchwarzmüller会开设一门Udemy课程 。 这是一个基于项目的课程,涵盖了从基础开始的每个主题。 我个人没有尝试过,但是我已经学习了Maximilian的几门课程,并且始终喜欢他的课程质量。 此外,它在近40K的成绩中得分为4.7 / 5,成为Udemy上目前排名最高的Vue.js课程。 如果您已遵循它,请在评论中毫不犹豫地分享您的想法。

Cost: As with any course on Udemy, you can get it for $10 or less when it’s on sale.

费用:与Udemy上的任何课程一样,您可以以10美元或更低的价格购买它。

Image for post
Vue JS — The Complete Guide (incl. Vue Router & Vuex) course by Maximilian Schwarzmüller
Vue JS — MaximilianSchwarzmüller 的完整指南(包括Vue Router和Vuex)课程

Scrimba:免费学习Vue.js (Scrimba: Learn Vue.js for Free)

Scrimba is a learning platform that I just recently discovered. They cover a wide range of topics, so I’m definitely going to try some of them. They have a pay-per-course pricing model kind of like Udemy. Some of their courses are free, like this one on Vue.

Scrimba是我最近发现的一个学习平台。 它们涵盖了广泛的主题,因此我肯定会尝试其中的一些。 他们的课程定价模式类似于Udemy。 他们的某些课程是免费的,例如Vue上的这一门课程。

What’s interesting about this one is that they use an interactive online editor. So you’re watching a video course, but at any point, you can jump into the code on the screen to complete an exercise, which makes it very hands-on and engaging.

关于这一点,有趣的是他们使用了交互式在线编辑器。 因此,您正在观看视频课程,但是在任何时候,您都可以跳入屏幕上的代码以完成练习,这使它非常实用且引人入胜。

This free Vue course doesn’t cover very much, though, so it’s more of a way for you to see if you like Scrimba as a learning platform. If so, you can subscribe for $19/month and follow their Vue Bootcamp, which is much more thorough.

但是,这个免费的Vue课程内容不多,因此,它是您了解自己是否喜欢Scrimba作为学习平台的一种方式。 如果是这样,您可以订阅$ 19 /月,并关注他们的Vue Bootcamp ,这更为彻底。

Cost: Freemium at $19/month.

费用:免费增值服务,每月19美元。

Image for post
Learn Vue.js for free course 免费学习Vue.js课程

Scotch.io:Vue.js入门 (Scotch.io: Getting Started with Vue.js)

Scotch.io is a great learning platform mainly for front-end developers, but it also covers some back-end/APIs topics. They have a new course on building an API with Deno, for example, that I’ll be taking a look at very soon. Their Getting Started with Vue.js course is really for beginners, so it’s a good place to start. What I like about their teaching method in this course is that they show you how a feature would look in vanilla JS and then built with Vue.

Scotch.io是一个很好的学习平台,主要面向前端开发人员,但它也涵盖了一些后端/ API主题。 例如,他们有一门关于使用Deno构建API的新课程,我很快就会看一看。 他们的Vue.js入门课程非常适合初学者,因此这是一个不错的起点。 我对他们在本课程中的教学方法感兴趣的是,他们向您展示了如何在普通JS中使用Vue构建功能。

It only handles the basics, though, so you’ll need to move forward with their intermediate course where you’ll learn about routing and managing the state with Vuex while building an online store. And then you’ll need to move to more complete platforms like Vue Mastery or Vue School.

但是,它仅处理基础知识,因此您需要继续学习其中级课程 ,在此过程中 ,您将学习在建立在线商店时如何使用Vuex路由和管理状态。 然后,您需要转到更完整的平台,例如Vue Mastery或Vue School。

Cost: Since it’s been acquired by DigitalOcean, all courses on Scotch are completely free.

费用:由于它已被DigitalOcean收购,因此有关Scotch的所有课程都是完全免费的。

Image for post
Scotch.io — Getting Started with Vue.js course
Scotch.io — Vue.js课程 入门

Alligator.io — Vue.js部分 (Alligator.io — Vue.js Section)

Alligator is a fully free blogging platform with an impressive amount of posts on anything front end. Their section on Vue.js is so wide that you can scroll to the very bottom of it, start from a Hello World, and walk your way up to more complex concepts like lazy-loading, handling online/offline, using third-party tools (Google Analytics, Firebase, Google Maps, Socket.io, etc.), or using Apollo and GraphQL.

Alligator是一个完全免费的博客平台,在任何前端都有大量的帖子。 他们关于Vue.js的部分内容如此广泛,您可以滚动到它的最底端,从Hello World开始,然后逐步了解更复杂的概念,例如延迟加载,使用第三方工具处理在线/离线(Google Analytics(分析),Firebase,Google Maps,Socket.io等),或使用Apollo和GraphQL。

Lots of their articles are initially posted on DigitalOcean’s blog, so don’t be surprised if some links (especially the older ones) redirect to it.

他们的很多文章最初都发布在DigitalOcean的博客上,因此,如果某些链接(尤其是较旧的链接)重定向到它,不要感到惊讶。

Cost: Free

费用:免费

Image for post
Vue.js Section Vue.js部分

freeCodeCamp:学习Vue.js —初学者完整课程 (freeCodeCamp: Learn Vue.js — Full Course for Beginners)

As we could expect from one of the most complete learning platforms in our industry, freeCodeCamp offers a free three-hour video course on Vue.js.

正如我们可以从行业中最完整的学习平台之一期望的那样,freeCodeCamp在Vue.js上提供了免费的三小时视频课程

In my opinion, this course is way less engaging than others from this list. Regardless, it’s very thorough, and if you want to quickly cover as many Vue concepts as possible, this one goes through all you need to know to get started on a Vue project in under three hours.

我认为,这门课程比列表中的其他课程少参与。 无论如何,这都是非常彻底的,如果您想快速涵盖尽可能多的Vue概念,那么本教程将介绍您需要了解的所有知识,以在不到三个小时的时间内开始Vue项目。

Cost: Free

费用:免费

Image for post
freeCodeCamp — Learn Vue.js — Full Course for Beginners course by Beau Carnes
freeCodeCamp — 学习Vue.js — Beau Carnes的 面向初学者的完整课程

中:如何在Vue.js中构建Sudoku (Medium: How to Build Sudoku in Vue.js)

I love posts that are dedicated to building a fun project from scratch. There’s no better way to learn than by doing, and I’m very much willing to write some similar project-based articles in the future. If you have requests for projects you’d like to learn how to build with Vue or React, don’t hesitate to share in the comments!

我喜欢专门用于从头开始构建有趣项目的帖子。 没有比做的更好的学习方法了,我非常愿意在将来写一些类似的基于项目的文章。 如果您对项目有要求,想学习如何使用Vue或React进行构建,请随时分享评论!

By reading this article by Francesco Bonizzi, you’ll be able to build a fully working Sudoku game using Vue. How cool is that?

通过阅读Francesco Bonizzi的 这篇文章 ,您将能够使用Vue构建一款功能全面的Sudoku游戏。 多么酷啊?

Cost: Free

费用:免费

Image for post
Medium — How To Build Sudoku in Vue.js by Francesco Bonizzi
中— 弗朗切斯科·博尼兹 ( Francesco Bonizzi) 如何在Vue.js中构建数独

freeCodeCamp:如何使用Vue.js构建存储卡游戏 (freeCodeCamp: How to Build a Memory Card Game With Vue.js)

Moving along on the learning-by-building path, freeCodeCamp has a complete guide to building a memory card game by Tushar Gugnani.

沿着按构建学习的道路前进,freeCodeCamp拥有由Tushar Gugnani撰写的 构建存储卡游戏完整指南

Cost: Free

费用:免费

Image for post
freeCodeCamp — How to Build a Memory Card Game with Vue.js course by Tushar Gugnani
freeCodeCamp — 如何使用Vue.js课程 构建存储卡游戏,作者Tushar Gugnani

Hackernoon:如何使用Vue和Cosmic JS构建投资组合网站 (Hackernoon: How to Build a Portfolio Site Using Vue and Cosmic JS)

Once you’ve developed all the skills you need to get hired as a Vue.js developer, you’ll need a portfolio to let companies and recruiters know about your great new Vue.js acumen. This final tutorial will help you do just that: Build your own portfolio site using Vue.js — and discover the headless CMS Cosmic JS in the process.

一旦开发了被聘为Vue.js开发人员所需的所有技能,您就需要一个投资组合,以使公司和招聘人员了解您出色的Vue.js新锐人才。 本最终教程将帮助您做到这一点:使用Vue.js构建自己的投资组合网站-并在此过程中发现无头的CMS Cosmic JS。

Cost: Free

费用:免费

Image for post
How to Build a Portfolio Site Using Vue and Cosmic JS by 如何使用Vue和Cosmic JS构建投资组合站点 ,作者: Tony Spiro Tony Spiro

结论 (Conclusion)

I hope you find your favorite resource among these and enjoy learning Vue.js as much as I did. If you have other resources that you think should be included here, please share in the comments for everyone to enjoy.

希望您在其中找到自己喜欢的资源,并像我一样喜欢学习Vue.js。 如果您认为应该在此处包含其他资源,请分享评论,以供大家欣赏。

Happy learning!

学习愉快!

翻译自: https://medium.com/better-programming/10-resources-to-learn-vue-js-in-2020-c596e070772

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值