经原文作者授权，今天小渡为大家准备了本篇译文，希望可以对大家的技术学习起到帮助作用。 原文链接： https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h，作者：SimonHoldorf。 如有翻译不准确，请多指正！ 引言： 不管你是编程界的新人或者已经是一个经验丰富的开发者，在这个行业，为跟上快速的变化形势，学习新的概念以及语言/框架是必不可少的。 举个例子，Facebook开发的React框架进行开源，也仅仅只有4年时间，但现在却已经成为全球范围内JavaScript开发者的首选。但与此同时，Vue和Angular当然也有它们自己的追随者。以及Svelte、Next.js或Nuxt.js、Gatsby、Gridsome、Quasar等等。如果你想要像一个专业的JavaScript开发者一样耀眼，除了做好JS的基本功之外，至少还要在不同框架及库方面有一些经验。 为助力大家能够在2020年成为前端大神，我收集了9个不同的项目，每一个项目都有一个不同的主题以及一个不同的JavaScript框架或库作为技术栈，你可以建立并添加到你的作品集中。记住，没有什么是比实际操作更起到帮助作用，所以勇敢的行动起来，使你的思维变得敏锐，让这一切成为现实吧！ 01
使用React框架（以及钩子函数）开发一个搜索电影应用 开始行动的第一步可以是通过使用React框架开发一个搜索电影应用。下面是一张最终版的效果图。 你将学到什么？ 开发这个应用，通过使用相关的新的插件API，可以提高你的React使用技巧。示例项目使用了React组件，很多hook函数，一些外部的api，当然还有一些是通过CSS标记使用样式。 技术栈&特征React 和 Hooks开发React APPJSXCSS 无需提前做功课，这个项目提供给你一个完美的React功能学习入口，并且在2020年一定会带给你帮助。 你可以点击这个链接查找示例项目：https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/ 跟随教程，或者在此基础上赋予你自己的风格！ 02
使用Vue开发一个聊天应用 另外一个好项目是通过Vue来开发一个聊天应用。效果看起来是这样的： 你将学到什么？ 根据这个教程你将学会如何开发一个Vue应用，从scratch编程，创建组件，处理状态，创建路径，连接到第三方服务器以及如何处理授权。 技术栈&特征VueVuexVue RouterVue CLIPusherCSS 如果你想要开始Vue的学习或者想要提升自己的现有技能以应对2020年的发展变化，这真的是一个很好的项目。你可以点击这个链接查找教程：https://www.sitepoint.com/pusher-vue-real-time-chat-app/ 03
使用Angular8开发一个界面好看的天气应用 这个实例将帮助你开发一个界面好看的天气应用，通过使用谷歌的Angular8： 你将学到什么？ 这个项目将传授给你一些有价值的技能，诸如通过scratch编程开发一个应用程序，从设计到开发，一直到最终开发出产品为止。 技术栈&特征Angular 8Firebase服务端渲染CSS，Grid Layout，Flexbox移动网站&响应式夜间模式好看的UI 关于这个综合类的项目，我特别特别喜欢的一点是，你不需要单独分块的学习东西，而是可以直接学习从设计到最终开发的整个开发过程。你真的应该好好实练下这个项目！ https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e 04
使用Svelte框架开发一个计划应用 相比于React，Vue以及Angular，Sveltekinda就像是一个＂新手＂，但是尽管如此，它却是2020年最火热的框架之一。我承认，Plan APP不是当下最热的话题，但是这个项目真的可以帮助你打磨在Svelte框架方面的技能水平，这个应用的界面看起来是这样的： 你将学到什么？ 这个教程将向你展示如何从头到尾的使用Svelte3来开发一个应用。及如何利用组件、样式以及事件处理器。 技术栈&特征Svelte 3组件通过CSS标记使用样式ES 6语法 Svelte的入门级别的好的项目没有很多，所以我找到了这个，作为入门级学习就还不错。但谁又知道呢，也许你就是下一个创造者，到时候更全面的Svelte教程将会出现在明年期的这部分内容里。 https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6 05
用Next.js框架开发一个电子商务购物车 NextJs是用于开发React应用程序最流行的框架，提供服务端开箱即用的渲染功能。这个项目将向你展示开发一个电子商务购物车的方式，效果看起来类似这样： 你将学到什么？ 在这个项目中你将学到如何建立一个Next.js的开发环境，创建新页面和组件，获取数据，样式以及部署下一个应用程序。 技术栈&特征Next.js组件和页面数据获取样式部署SSR和SPA 有取自真实环境的示例是很棒的，例如通过一个电子商务的实例展示来学习一点新知识。你可以点击这里的链接查找教程：https://snipcart.com/blog/next-js-ecommerce-tutorial 06
使用Nuxt.js框架开发一个完全成熟的多语言博客网站 如果将Next.js比作是react，则Nuxt.js则相当于是Vue。Nuxt.js是一个很好的框架，结合了服务端渲染和单页面应用程序两者功能优势。最终开发出来的APP效果图将会是这样： 你将学到什么？ 这个示例项目将会向你传授如何使用Nuxt.js框架开发一个成熟的网站，从初始设置到最终部署。它使用了很多很酷的特征，Nuxt需要提供诸如页面、组件以及SCSS样式。 技术栈&特征Nuxt.js组件和页面Storyblok模块Mixins用于状态管理的VuexSCSS样式Nuxt中间件 这真的是一个很酷的项目，并且涵盖了很多Nuxt.js的好的特征。我个人工作时喜欢用Nuxt，你也真的应该试一下这个，因为它将使你也成为更好的Vue开发者！ https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial 07
使用Gatsby建立一个博客 Gatsby是一个静态站点生成器，使用React和GraphQL下挂钩。这是这个项目的结果： 你将学到什么？ 在这个教程中你将学到如何用Gatsby去建立一个出众的博客，这个博客可以很好的用于撰写你自己的文章。 技术栈&特征GatsbyReactGraphQL插件&主题MDX / MarkdownCSS辅助程序模板 如果你曾经想要开一个博客，这是一个很好的示例，如何利用React和GraphQL。我不是在说Wordpress总是一个坏的选择，但是有了Gatsby，你可以创建高性能的网站，而在这个过程中使用React则是一个很棒的组合！ https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc 08
使用Gridsome创建一个博客 将Gridsome比作Vue…好吧，我们已经将Next/Nuxt那样类比过了，但是此种类比也同样适用于Gridsome和Gatsby。两者都是使用GraphQL作为一个数据层，但是Gridsome使用的是VueJS。它也是一个很棒的静态网站生成器，能够帮助你创建好的博客： 你将学到什么？ 这个项目将向你传授如何利用Gridsome，GraphQL和Markdown来着手建立一个简单的博客。它同样涵盖如何通过Netlify来部署应用程序。 技术栈&特征GridsomeVueGraphQLMarkdownNetlify 这当然不是最全面的教程，但是却涵盖了Gridsome和Markdown的基本概念，并且这个教程可以是一个好的起始点。 https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome 09
使用Quasar开发一个类似SoundCloud的音频播放器 Quasar是另一个Vue框架，同样可以被用于开发移动应用程序。在这个项目中，你将开发一个看起来像这样的音频播放器： 你将学到什么？ 当其他的项目主要集中在web应用程序方面时，这个项目与之不同，它将向你展示如何通过Quasar框架，使用Vue来开发一个移动端APP。你应该已经有了一个工作Cordova，带有安卓开发工具/xcode配置。如果没有的话，教程里有一个关于类星体网站的链接，在这个网站中他们将向你展示建立的方法。 技术栈&特征QuasarVueCordovaWavesurferUI组件 一个展示了Quasar对于创建移动应用程序所发挥的作用的小项目。 https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer 结论 在这篇文章中，我向你展示了9个你可以自己创建的项目，每一个项目都专注于一个JavaScript框架或库。现在，选择是你们的：你会通过使用一个你之前没有使用过的框架来尝试新事物么？或者你是否想要通过做一个你已经掌握一定知识基础的技术领域的项目以此来加强你的技能？抑或是你是否会依赖于你最喜爱的框架/库，并且在2020年，做所有项目时都使用它？请自由留言。
