9个利用JavaScript框架或库构建的项目,助你2020年成为前端开发大师

广告位

如果你想成为一名专业的web前端开发工程师,那么除了掌握JavaScript之外,至少还应该具备一些其他框架和…

如果你想成为一名专业的web前端开发工程师,那么除了掌握JavaScript之外,至少还应该具备一些其他框架和库的开发经验。

为了帮助你成为2020年的前端开发大师,我收集了9个不同的项目,其中每个项目都有不同的主题,并使用了不同的JavaScript框架或库,希望你能尝试构建这些项目,并建立自己的展示成果。请记住,纸上谈兵并没有太大益处,不如现在就开始动手,逐个攻克这些难题!

1. ****使用React构建电影搜索应用

首先,你可以用React构建一款电影搜索应用。该应用最终大致如下:

你可以学习到的技术

构建这个应用程序可以让你更进一步掌握React以及新兴的Hooks API。上图中的项目利用了React组件、许多钩子、一个外部API、当然还有一些CSS样式。

技术栈与功能

  • React与钩子
  • 创建React应用
  • JSX
  • CSS

这个项目不需要使用任何类,可以为你提供一个接触函数式React的完美契机,并帮助你在2020年提升自我。如下链接是该项目的一个例子,你可以参考链接中的教程,也可以构建自己风格的应用!

2.**** 使用Vue构建聊天应用

另一个很棒的项目是使用我最喜欢的JavaScript库VueJS构建聊天应用。该应用大致如下:

你可以学习到的技术

你可以跟随如下教程学习如何从头开始设置Vue应用、创建组件、处理状态、创建路由、连接到第三方服务以及处理身份验证。

技术栈与功能

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Pusher
  • CSS

这是一个非常出色的项目,既可以帮助你入门Vue,也可以提高你的技术力以应对2020年的开发。教程链接如下:

3. ****使用Angular 8构建一款漂亮的天气预报应用

该应用可以帮助你利用Google的Angular 8构建一款漂亮的天气预报应用:

你可以学习到的技术

该项目可以教你一些扎实的技术,包括从头开始创建应用,从设计到开发,一直到生产部署。

技术栈与功能

  • Angular 8
  • Firebase
  • 服务器端渲染
  • CSS、Grid Layout和Flexbox
  • 人性化设计、响应式移动应用
  • 夜间模式
  • 漂亮的UI

这是一个综合项目,你可以接触到从设计到最终部署的整个开发过程。教程链接如下:

4. ****使用Svelte构建待办事项应用

与React,Vue和Angular相比,Svelte是一款新兴的框架,但仍是2020年的热门话题之一。虽然待办事项这类的应用有点老套,但这个项目确实可以帮助你进一步掌握Svelte。该应用大致如下:

你可以学习到的技术

该教程将向你展示如何使用Svelte 3制作应用的整个过程。它利用了组件、样式和事件处理程序。

技术栈与功能

  • Svelte 3
  • 组件
  • 通过CSS设置样式
  • ES 6语法

优秀的Svelte入门项目不是很多,因此我认为如下教程是一个很好的起点。也许你可以创建另一个更全面的Svelte教程,然后展现给大家?

5. ****使用Next.js构建电子商务购物车

NextJs是最受欢迎的框架,你可以利用该框架创建支持服务器端渲染的开箱即用的React应用。该项目将向你展示如何构建如下所示的电子商务购物车:

你可以学习到的技术

在这个项目中,你将学习如何设置Next.js开发环境,创建新页面和组件,获取数据,样式以及部署下一个应用程序。

技术栈与功能

  • Next.js
  • 组件和页面
  • 获取数据
  • 样式
  • 部署方式
  • SSR和SPA

通过一个真实的例子(例如电子商务购物车)学习新技术的方式一般都会深得人心。教程链接如下:

6. ****使用Nuxt.js建立一个完整的多语言博客网站

Nuxt.js与Vue的关系就好象Next.js与React。一个好的框架可以结合服务器端渲染和单页应用程序的功能。该应用最终大致如下:

你可以学习到的技术

这个示例项目将教你如何使用Nuxt.js,从初始设置到最终部署构建完整的网站。这个项目利用了Nuxt必须提供的许多出色功能,例如页面、组件以及SCSS样式。

技术栈与功能

  • Nuxt.js
  • 组件和页面
  • Storyblok模块
  • 混合组件
  • Vuex的状态管理
  • SCSS样式
  • Nuxt中间件

这个项目非常炫酷,其涵盖了很多Nuxt.js的出色功能。我个人非常喜欢使用Nuxt,所以你也应该试试看,希望通过这个项目你可以看成长为更出色的Vue开发人员!教程链接如下:

7. ****使用Gatsby建立博客

Gatsby是一个出色的静态站点生成器,其底层使用React和GraphQL。该项目的结果大致如下:

你可以学习到的技术

在这个教程中,你将学习如何利用Gatsby构建出色的博客,其实就相当于你使用React和GraphQL编写自己的博文。

技术栈与功能

  • Gatsby
  • React
  • GraphQL
  • 插件和主题
  • MDX /Markdown
  • Bootstrap CSS
  • 模板

如果你想创建一个博客,那么可以通过这个例子来学习如何利用React和GraphQL创建博客网站。我并不是说选择Wordpress不好,但是你可以使用Gatsby,创建高性能的React网站!教程链接如下:

8. ****使用Gridsome建立博客

Gridsome与Vue的关系嘛……我们已经在介绍Nuxt的时候拿Next做类比了,然而Gridsome和Gatsby也是如此。两者都使用GraphQL作为数据层,只不过Gridsome使用VueJS。Gridsome是一个非常出色的网站生成工具,它可以帮助创建优秀的博客:

你可以学习到的技术

这个项目将教你如何利用Gridsome、GraphQL和Markdown构建一个简单的博客,它还介绍了如何通过Netlify部署应用程序。

技术栈与功能

  • Gridsome
  • Vue
  • GraphQL
  • Markdown
  • Netlify

当然,如下教程并不是很全面,但它涵盖了Gridsome和Markdown的基本概念,可以作为一个很好的起点。

9. ****使用Quasar构建类似于SoundCloud的音频播放器应用

Quasar是另一个Vue框架,也可用于构建移动应用程序。在这个项目中,你将创建一个音频播放器应用,如下所示:

你可以学习到的技术

上述其他项目主要关注Web应用程序,但该项目将向你展示如何通过Quasar框架使用Vue创建移动应用。在这个项目开始之前,你应该配置好Cordova,并配置了android studio / xcode。如果没有的话,那么可以点击教程中的链接,打开quasar网站,学习如何设置。

技术栈与功能

  • Quasar
  • Vue
  • Cordova
  • Wavesurfer
  • UI组件

这是一个小项目,主要展示了Quasar在构建移动应用方面的强大功能。

10. ****总结

在本文中,我展示了9个你可以尝试构建的项目,其中每个项目都专注于不同的JavaScript框架或库。接下来,选择权在你手中:你是否愿意尝试从未用过的框架?还是说2020年你希望在所有的项目中继续吃老本?

如果你依然在编程的世界里迷茫,不知道自己的未来规划,打算深入了解这个行业的朋友,我编程工作6年了,推荐一下我的前端学习扣qun 685910553,不论你是学生还是想转行的朋友,都欢迎,每晚分享干货,网页制作,网站开发,web全栈开发,从0基础开始到项目实战,感兴趣都可以来学习。电子书籍都在文件分享给大家!点击:加入

关于作者: 范之铭

为您推荐