简介
无论你是一个编程的新手还是你已经是一个有经验的开发者，在这个行业中，学习新的概念和语言/框架都是必须的，这样才能跟上快速的变化。举个例子来说，Facebook出的开源框架React只用了4年时间就成为了全球Javascript开发者的第一选择。当然，Vue和Angular也有可观的追随者数量。类似的还有Svelte，还有通用框架Next.js和Nuxt.js，以及Gatsby，Gastsby，Quasar，还有更多其他的。如果你想成为一个专业的Javascript开发者，你至少应该在不同框架和库方面有一些一些经验——除了具备好的JS基础之外。
为了帮助你成为前端开发高手，我收集了九个不同的项目，每一个都有不同的主题并且使用了不同的Javascript框架和库，作为一个技术栈，你可以构建它们并将它们添加到你的投资组合中。记住，没有什么能够比你自己动手开发项目更有帮助，所以去吧，磨炼你的心智，并且让它们成为现实！
使用React（使用hooks）开发一个电影检索的应用
首先你可以从使用React构建一个电影搜索应用开始。下面的图片是应用最终的样子。
你将学习到什么
构建这个应用将会提升你使用最新的React的Hooks API技能。这个示例项目使用React组件，一些hooks函数，一个外部的API，当然也有通过CSS写的一些样式。
技术栈 &
- React with Hooks
- create-react-app
- JSX
- CSS
这个项目没有使用类，它给你了一个完美使用函数式react的入手点，在2020年这也是会很有帮助的。在这里你可以找到这个简单的项目：
https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/
跟随教程或者开发你自己风格的应用！
使用Vue开发一个聊天应用
另外一个极好的项目是使用我最喜欢的Javascript框架VueJS开发一个聊天应用。这个应用看起来将会是这个样子：
你将学习到什么
跟随教程，你讲学习到如何从头建立一个Vue应用，创建组件、处理状态、创建路由、连接第三方服务，甚至处理认证。
技术栈 & 功能
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
这真的是一个极好的项目，可以让你开始使用Vue，或者提高你现有的技术来应对2020年的发展。你可以在这里找到教程：
https://www.sitepoint.com/pusher-vue-real-time-chat-app/
使用Angular 8开发一个漂亮的天气应用
这个例子将帮助你使用谷歌的Angular 8构建一个漂亮的天气应用：
你将学到什么
这个项目将教给你宝贵的技能，比如从零创建一个应用程序，从设计到开发，一直到准备上线部署。
技术栈 & 功能
- Angular 8
- Firebase
- Server-Side Rendering
- CSS的Grid布局和Flexbox布局
- Mobile friendly & responsive
- Dark Mode
- 漂亮的UI设计
我非常非常喜欢这个综合的项目的地方是，你不是孤立的学习东西，而是从设计到最终部署的整个开发过程。你真的应该去做这个项目！
使用Sevlte开发一个待办事项的项目
Svelte相比React，Vue和Angular像是一个新生儿，但仍然是2020年的热点之一。待办事项不一定是最热门的话题，但它可以磨炼你的Svelte技能，项目看起来就像这样：
你将学到什么
这份教程将向你展示如何使用Svelte 3从头到尾构建一个应用。它使用了组件、样式和事件处理。
技术栈 & 功能
- Svelte 3
- 组件
- CSS样式
- ES 6语法
好的Svelte入门项目并不多，所以我觉得这是一个还算不错的入门项目。谁知道呢，也许你会创造一个更全面的Svelte教程，在明年的版本中呈现给大家？
用Next.js开发一个电子商务的购物车
Nextjs是创建React应用最流行的框架，它支持服务端渲染，开箱即用。这个项目将向你展示如何开发一个像下面这样的电子商务购物车：
你将学到什么
在这个项目中，你将学会如何配置Next.js的开发环境，创建新的页面和组件，获取数据，样式，并且部署一个Next应用。
技术栈 & 功能
- Next.js
- 组件和页面
- 数据获取
- 样式
- 部署
- SSR和SPA（服务端渲染和单页应用）
通过一个实际的例子学习新的东西总是很好的，比如电子商务展示。你可以在这里找到教程：有一个实际的例子，如电子商务展示，学习新的东西总是很好的。你可以在这里找到教程：
使用Nuxt.js开发一个完整的多语言博客网站
Nuxt.js之于Vue，就像Next.js之于React。这是一个很好的框架，能够将服务端渲染和单页应用的优势结合起来。你创建的最终应用看起来就像是这个样子：
你将学到什么
这个示例项目将教你如何使用Nuxt.js建立一个完整的网站，从最初的设置到最后的部署。它利用Nuxt提供的许多酷炫的功能，比如页面和组件，以及SCSS的样式。
技术栈 & 功能
- Nuxt.js
- 组件和页面
- Storyblok module
- Mixins（混合）
- Vuex状态管理
- SCSS
- Nuxt中间件
对你来说这会是一个非常酷的项目，它涵盖了Nuxt.js的许多重要功能。我个人很喜欢用Nuxt工作，你真的应该试试这个，因为它会让你成为一个更好的Vue开发者!
使用Gatsby开发一个博客
Gatsby是非常好的静态网站生成器，它的底层是使用React和GraphQL。这个项目最终的样子就像下面这样：
你将学到什么
在本教程中，你将学习如何利用Gatsby建立一个优秀的博客，你可以很好地利用Gatsby写自己的文章，同时可以使用React和GraphQL。
技术栈 & 功能
- Gatsby
- React
- GraphQL
- Plugins & Themes
- MDX / Markdown
- Bootstrap
- 模板
如果你曾想开发一个博客，那么这是一个利用React和GraphQL来实现的绝佳范例。我并不是说WordPress是不好的选择，但是利用Gatsby，你还可以使用React开发一个高性能的网站，这是一举两得的选择！
使用Gridsome开发一个博客
Gridsome对于Vue来说…好吧，我们已经有了Next/Nuxt，但对于Gridsome和Gatsby来说也是如此。两者都使用GraphQL作为数据层，但Gridsome利用了VueJS。它也是一个很棒的静态网站生成器，可以帮助你创建很棒的博客：
你将学到什么
从这个项目中你将学到如何开始使用Gridsome，GraphQL, 和Markdown开发一个简单的博客。它还包含了如何通过Netlify部署应用。
技术栈 & 功能
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
这肯定不是最全的教程，但它涵盖了Gridsome和Markdown的基本概念，可以作为一个好的的入门教程。
使用Quasar开发一个类似于SoundCloud的音频播放器
Quasar是另一个Vue框架，它可以用来开发移动应用。在这个项目中，你创建的音乐播放器看起来会是这个样子：
你将学到什么
虽然其他项目主要集中在Web应用程序上，但本项目将向您展示如何通过Quasar框架使用Vue创建一个移动应用。你应该已经有一个可以进行开发的Cordova设置和android studio / xcode配置。如果还没有的话，在教程中有一个链接到Quasar网站，在那里他们向你展示如何设置。
技术栈 & 功能
- Quasar
- Vue
- Cordova
- Wavesurfer
- UI Components
这是一个小项目，它展示了Quasar在构建移动应用方面的强大功能。
总结
在这篇文章中，我向你展示九个你可以开发的项目，每个项目都使用了不同的Javasript框架或者库。现在是你决定的时候了：你会使用你从未使用过的框架尝试开发项目吗？或者你想通过做一个项目来提升你已有的技能吗？或者你会依赖你最拿手的框架或者库来完成所有项目的开发吗？
我最近开了一个新网站：The Smart Coder，在这里，我将为社区创造免费的内容，比如更加优质的javascript项目
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
