日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

DEV的年度熱文，讀完覺(jué)得不錯(cuò)，所以翻譯出來(lái)供大家參考，個(gè)人水平有限，文中可能會(huì)有一些翻譯錯(cuò)誤，可以在評(píng)論區(qū)指正。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),沾益企業(yè)網(wǎng)站建設(shè),沾益品牌網(wǎng)站建設(shè),網(wǎng)站定制,沾益網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,沾益網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

本篇文章一共涉及了9個(gè)流行的框架/庫(kù)，沒(méi)有具體的介紹使用方法，而是給了一些非常棒的實(shí)戰(zhàn)教程。

初學(xué)者(也許一些有經(jīng)驗(yàn)的開(kāi)發(fā)者也是一樣)在讀完官方文檔，想寫(xiě)一個(gè)項(xiàng)目練手的時(shí)候不知道做什么項(xiàng)目好，或是有想法，但是無(wú)從下手。那么這篇文章將會(huì)給你帶來(lái)很大的幫助。

導(dǎo)讀

無(wú)論你是編程新手還是經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員。在這個(gè)行業(yè)中，我們不得不一直學(xué)習(xí)新概念和新語(yǔ)言或是框架，才能跟上快速變化。以React為例 —— FaceBook 四年前開(kāi)源，現(xiàn)在它已經(jīng)成為了全球JS開(kāi)發(fā)者的首選。但是與此同時(shí)，Vue 和 Angular 也有自己的追求者。然后是 Svelte，Next 和 Nuxt.js，Gatsby，Gridsome,quasar 等等，如果你想成為專業(yè)的 JavaScript 開(kāi)發(fā)人員，你在使用自己熟悉的框架進(jìn)行開(kāi)發(fā)的同時(shí)，還需要對(duì)不同的框架和庫(kù)有一些了解。

為了幫助你在2020年成為一個(gè)前端大神，我收集了9個(gè)使用了不同JS框架/庫(kù)的項(xiàng)目，你可以去構(gòu)建或者將他們加入到自己未來(lái)的開(kāi)發(fā)計(jì)劃中。記住，沒(méi)什么比實(shí)際開(kāi)發(fā)一個(gè)項(xiàng)目更有幫助。所以，不要猶豫，試著去開(kāi)發(fā)一下。

1. 使用React(with hooks)構(gòu)建一個(gè)電影搜索應(yīng)用

首先，你可以使用React構(gòu)建一個(gè)電影搜索應(yīng)用。展示如下：

你將學(xué)到什么?

構(gòu)建這個(gè)項(xiàng)目，你可以使用較新的 Hook API 來(lái)提升你的 React 技能。示例項(xiàng)目使用了React組件，很多 hooks 以及一些外部的 API，當(dāng)然還有一些CSS樣式。

技術(shù)棧/點(diǎn)

1. React(Hooks)
2. create-react-app
3. JSX
4. CSS

你可以在這里看到這個(gè)示例項(xiàng)目：https://www.freecodecamp.org/...

2.使用Vue構(gòu)建一個(gè)聊天應(yīng)用

另外一個(gè)要介紹給你的很棒的項(xiàng)目是使用Vue構(gòu)建的聊天應(yīng)用程序。展示如下：

你將學(xué)到什么?

您將學(xué)習(xí)到如何從頭開(kāi)始設(shè)置Vue應(yīng)用，創(chuàng)建組件，處理狀態(tài)，創(chuàng)建路由，連接到第三方服務(wù)，甚至是處理身份驗(yàn)證。

技術(shù)棧/點(diǎn)

1. Vue
2. Vuex
3. Vue Router
4. Vue CLI
5. Pusher
6. CSS

這真的是一個(gè)非常棒的項(xiàng)目，不管是用來(lái)學(xué)習(xí)Vue或者是提升現(xiàn)有的技能，以應(yīng)對(duì)2020年的發(fā)展。你可以查看這個(gè)教程： https://www.sitepoint.com/pus...

3. 使用Augular8構(gòu)建一款漂亮的天氣應(yīng)用

此示例將幫助你使用 Google 的 Angular 8 來(lái)構(gòu)建一塊漂亮的天氣應(yīng)用程序：

你將學(xué)到什么?

該項(xiàng)目將教你一些寶貴的技能，例如從頭開(kāi)始創(chuàng)建應(yīng)用，從設(shè)計(jì)到開(kāi)發(fā)，一直到生產(chǎn)就緒部署。

技術(shù)棧/點(diǎn)

1. Angular 8
2. Firebase
3. SSR

網(wǎng)絡(luò)布局和Flexbox

移動(dòng)端友好 && 響應(yīng)式布局

深色模式

漂亮的用戶界面

對(duì)于這個(gè)綜合項(xiàng)目，我真正喜歡的是，不是孤立地學(xué)習(xí)東西，而是從設(shè)計(jì)到最終部署的整個(gè)開(kāi)發(fā)過(guò)程。

https://medium.com/@hamedbaat...

4. 使用 Svelte 構(gòu)建一個(gè) To-Do 應(yīng)用

與React，Vue和Angular相比，Svelte 還很新，但仍是熱門(mén)之一。好的，To-Do應(yīng)用不一定是那里最熱門(mén)的項(xiàng)目，但這確實(shí)可以幫助你提高Svelte技能，如下：

你將學(xué)到什么?

本教程將向你展示如何從頭到尾使用Svelte3制作應(yīng)用。 它利用了組件，樣式和事件處理程序。

技術(shù)棧/點(diǎn)

1. Svelte 3
2. Components
3. CSS
4. ES6語(yǔ)法

Svelte 沒(méi)有太多優(yōu)秀的入門(mén)項(xiàng)目，這個(gè)是我覺(jué)得不錯(cuò)的一個(gè)上手項(xiàng)目：https://medium.com/codingthes...

5. 使用 Next.js 構(gòu)建購(gòu)物車(chē)

Next.js 是一個(gè)輕量級(jí)的 React 服務(wù)端渲染應(yīng)用框架，該項(xiàng)目將向你展示如何構(gòu)建一個(gè)如下所示的購(gòu)物車(chē)：

你將學(xué)到什么?

在這個(gè)項(xiàng)目中，你將學(xué)習(xí)如何設(shè)置 Next.js 的開(kāi)發(fā)環(huán)境，創(chuàng)建新頁(yè)面和組件，獲取數(shù)據(jù)，設(shè)置樣式并部署一個(gè) next 應(yīng)用。

技術(shù)棧/點(diǎn)

1. Next.js
2. 組件和頁(yè)面
3. 數(shù)據(jù)獲取
4. 樣式
5. 部署
6. SSR和SPA

你可以在此處找到該教程：https://snipcart.com/blog/nex...

6. 使用 Nuxt.js 構(gòu)建一個(gè)多語(yǔ)言博客網(wǎng)站

Nuxt.js 是 Vue 服務(wù)端渲染應(yīng)用框架。你可以創(chuàng)建一個(gè)如下所示的應(yīng)用程序：

你將學(xué)到什么?

這個(gè)示例項(xiàng)目從初始設(shè)置到最終部署一步一步教你如何使用 Nuxt.js 構(gòu)建一個(gè)完整的網(wǎng)站。它使用了 Nuxt 提供的許多出色功能，如頁(yè)面和組件以及SCSS樣式。

技術(shù)棧/點(diǎn)

• Nuxt.js
• 組件和頁(yè)面
• Storyblok模塊
• Mixins
• Vuex
• SCSS
• Nuxt中間件

這個(gè)項(xiàng)目包含了涵蓋了 Nuxt.js 的許多出色功能。我個(gè)人很喜歡使用 Nuxt 進(jìn)行開(kāi)發(fā)，你應(yīng)該嘗試使用它，這將使你成為更好的 Vue 開(kāi)發(fā)人員!https://www.storyblok.com/tp/...

除此之外，我還找到了一個(gè)B站的視頻：https://www.bilibili.com/vide...

7. 使用 Gatsby 構(gòu)建一個(gè)博客

Gatsby是一個(gè)出色的靜態(tài)站點(diǎn)生成器，它允許使用React作為渲染引擎引擎來(lái)搭建一個(gè)靜態(tài)站點(diǎn)，它真正具有現(xiàn)代web應(yīng)用程序所期望的所有優(yōu)點(diǎn)。該項(xiàng)目如下：

你將學(xué)到什么?

在本教程中，你將學(xué)習(xí)如何利用 Gatsby 構(gòu)建出色的博客。

技術(shù)棧/點(diǎn)

1. Gatsby
2. React
3. GraphQL
4. Plugins & Themes
5. MDX / Markdown
6. Bootstrap CSS
7. Templates

如果你想創(chuàng)建博客，這個(gè)示例教你如何利用 React 和 GraphQL 來(lái)搭建。并不是說(shuō) WordPress 是一個(gè)不好的選擇，但是有了 Gatsby ，你可以在使用 React 的同時(shí)創(chuàng)建高性能站點(diǎn)!

https://blog.bitsrc.io/how-to...

8. 使用 Gridsome 構(gòu)建一個(gè)博客

Gridsome 和 Vue的關(guān)系與 Gatsby 和 React 的關(guān)系一樣。Gridsome 和 Gatsby 都使用 GraphQL 作為數(shù)據(jù)層，但是 Gridsome 使用的是 VueJS。這也是一個(gè)很棒的靜態(tài)站點(diǎn)生成器，它將幫助您創(chuàng)建出色的博客：

你將學(xué)到什么?

該項(xiàng)目將教你如何使用 Gridsome，GraphQL 和 Markdown 構(gòu)建一個(gè)簡(jiǎn)單的博客，它還介紹了如何通過(guò)Netlify 部署應(yīng)用程序。

技術(shù)棧/點(diǎn)

1. Gridsome
2. Vue
3. GraphQL
4. Markdown
5. Netlify

當(dāng)然，這不是最全面的教程，但涵蓋了 Gridsome 和 Markdown 的基本概念，可能是一個(gè)很好的起點(diǎn)。

https://www.telerik.com/blogs...

9.使用 Quasar 構(gòu)建一個(gè)類似 SoundCloud 的音頻播放器

Quasar 是另一個(gè) Vue 框架，也可以用于構(gòu)建移動(dòng)應(yīng)用程序。 在這個(gè)項(xiàng)目中，你將創(chuàng)建一個(gè)音頻播放器應(yīng)用程序，如下所示：

你將學(xué)到什么?

不少項(xiàng)目主要關(guān)注Web應(yīng)用程序，但這個(gè)項(xiàng)目展示了如何通過(guò) Quasar 框架創(chuàng)建移動(dòng)應(yīng)用程序。你應(yīng)該已經(jīng)配置了可工作的 Cordova 設(shè)置，并配置了 android studio / xcode。 如果沒(méi)有，在教程中有一個(gè)指向quasar 網(wǎng)站的鏈接，在那里你可以學(xué)習(xí)如何進(jìn)行設(shè)置。

技術(shù)棧/點(diǎn)

1. Quasar
2. Vue
3. Cordova
4. Wavesurfer
5. UI Components

一個(gè)展示了Quasar在構(gòu)建移動(dòng)應(yīng)用程序方面的強(qiáng)大功能的小項(xiàng)目：https://www.learningsomething...

總結(jié)

本文展示了你可以構(gòu)建的9個(gè)項(xiàng)目，每個(gè)項(xiàng)目專注于一個(gè)JavaScript框架或庫(kù)?，F(xiàn)在，你可以自行決定：使用以前未使用的框架來(lái)嘗試一些新的東西或是通過(guò)做一個(gè)項(xiàng)目來(lái)提升已有的技能，或者在2020年完成所有項(xiàng)目?

網(wǎng)頁(yè)題目：9個(gè)項(xiàng)目助你在2020年成為前端大師！
網(wǎng)站鏈接：http://www.dlmjj.cn/article/ccsieig.html