前端人應該有的網站和工具

很早就想寫一篇文章關於前端人的工具庫了,因爲我發現其實有了工具,纔是成爲工具人的基礎。

01 前言

最近有很多初學者在後臺留言說:“我是一個小白,怎麼纔可以快速入門前端呀?”。關於這個問題其實不太好回答,因爲這個問題就好像說我是一個窮光蛋如何快速致富一樣的道理。但是也不是沒有辦法回答你這個問題,畢竟掌握一門知識點還是有它的路徑的,不能說路徑一樣,但起碼可以參考。

接下來我就以一個初學者走過但已不是初學者的角度來給大家介紹前端人的工具庫到底有哪些,如何快速幫你梳理知識點,快速入門(精通靠自己)。

02 基礎入門

說了基礎入門,其實真的是很基礎的,我一開始也是這樣過來的。無非就是從最簡單的html/css開始搞起來,那時候什麼都要自己敲,哪有現在組件庫這麼方便呀!只能說現在的大家太幸福了,所謂前人種樹,後人乘涼。但是自己也別忘記樹是怎麼種的就好。

大家應該都知道這個網站,簡直就是初學者的福音,裏面什麼都有,但是都很基礎。大家可千萬不要以爲基礎就不用心去學,就好像大學學的科目,帶有基礎二字的書本往往是最難的。可以說前端的小夥伴要是把上面關於前端的過一遍,你就入門了。時間就大概一兩週就可以了,而且也是沒有什麼難度的,假如你是科班出身那就更容易入門了。

這個其實和菜鳥教程差不多,也是基礎的標籤等知識點,我覺得看菜鳥教程就好了,大家也可以瞭解一下。

這個真的就是我的啓蒙網站,雖然現在已經不常用了,但是一直都在我的收藏夾第一名。不爲什麼就是爲了一種情懷。這個網站還是我沒有上大學之前一位師兄推薦的,那時候主要是學習c++的課程,後來就跑去學前端了(因爲簡單)

上面很多都是收費的課程,但是也有不錯的免費課,不想看書或者教程的同學可以選擇去看慕課網。

這個也是比較基礎的文檔,內容的話比前兩個稍有深度,知識講解也是比較到位的,平時查閱的時候可以作爲自己的文檔,網站的佈局我覺得是不錯的,知識分類頁非常有條理。

03 進階鍛鍊

當你基礎入門之後呢,你就應該搞一些比較好玩的技術來玩一下,比如vue和react這個前端比較火的技術,可以說是前端必學的技術,因爲沒有掌握或者會用它們,你基本上找不到工作。

這是一個非常容易上手的前端框架,前提是你已經經過了基礎入門的鍛鍊。而且它的周邊以及生態都非常完善,也有很多支持的組件庫,後邊會介紹。所以強烈推薦大家去學習這個框架,能夠做一寫簡單的效果之類的,找到前端的樂趣。

還有介紹一下Vue的腳手架工具,能夠讓你快速生成一個Hello World項目,然後進行快速的開發,專注於業務。平時用的也是比較多的。

因爲我對react的技術棧不是很熟悉,我只停留在文檔上面,但是也做過簡單的demo,知道引用組件、業務拆分等的思想,個人覺得其實和vue都是差不多的,也是組件化的思想,大家也要去學習一下。

因爲我沒有接觸過Angular,所以我就不多說這個,但是不排除也有公司使用angular技術,大家有時間也要多去了解一下吧。我要了解

04 精美組件庫

好啦,到了我最想介紹的一部分了,其實這個也是更方便我們前端的日常業務需要。說白了就是解放了我們前端的開發,不用寫複雜的css或者html,開箱即用。在這裏也非常感謝前端社區做出的巨大貢獻。

本人非常喜歡這個組件庫,因爲裏面的一些功能都基本上能夠滿足我的開發需要,而且也是非常容易上手操作,直接CDN引入或者npm安裝,任君選擇。最重要的是能夠配合Vue.js進行項目開發。

這是由螞蟻金服出品的前端組件庫,也是非常好用的,說再多還不如大家自己去體驗一下,它也是支持前端框架使用,而且現在4.0版本也已經發布了。

這是我最早使用的前端組件庫,那時候我發現的時候覺得世界一下子開闊了許多,因爲我從基礎入門之後就接觸這個了,是一位前端的小姐姐推薦的。雖然現在基本上已經不用了,但是還是那句話,情懷所在,也推薦一下。

好像這個UI組件庫也是挺多人推薦的,是阿里開發的前端組件庫,我沒有用過,大家可以去看看。

這是一個由滴滴公司開發的前端組件庫,也是支持Vue.js語法的,本人也沒有使用過,大家也可以瞭解一下。

05 小程序開發

最近也是做小程序開發相關的工作,其實小程序開發現在已經方便很多了,因爲有了很多小程序框架,接下來就介紹一下。

這個就不用過多介紹了,畢竟是老大哥,而且官方也有原生支持的WeUI組件庫,也是非常方便的。

這是近幾年來發展比較好的小程序框架,不僅可以開發小程序,實現多端的開發,還可以編譯成APP,想想都讓人心動。更重要的是它也支持vue語法,簡直不能太爽。

說起uni-app不得不提一下它的插件市場,就像我們平時菜市場買菜一樣方便,直接拿過來就用,而且還免費。但是也要看清楚是否有一些兼容性問題等。大家下載插件有問題不要噴,因爲大家都是爲了社區貢獻,我們更應該鼓勵作者。

這是一個掘金小夥伴的評論,我才發現了這個網站,看了一下覺得非常不錯,它的官網介紹稱這是uniapp生態最優秀的UI框架,全面的組件和便捷的工具會讓您信手拈來,如魚得水。我現在還沒開始使用,大家可以去試一下,應該是不錯的。

這是一個由京東開發的小程序框架,它的介紹是一處代碼,多出運行,我在很久之前就使用過一次,忘了什麼感覺。大家也可以去官網瞭解一下,說不定不也會愛上這個框架呢!

這是一個由美團開發的一個小程序框架,也是支持vue.js的語法,而且它也支持小程序的生命週期,也就是說vue的生命週期和小程序的都適用。

說了這麼多,給大家推薦一下我覺得非常不錯的小程序資料彙總,每次開發小程序都會看一下到底用什麼好,別人總結的非常好!微信小程序開發資源彙總

最近使用mpvue開發小程序也是使用了這個組件庫進行開發,不得不說這是一個非常好的組件庫,裏面的組件很豐富,能夠滿足我們的業務開發需要。

這也是一套基於Vue.js的高質量UI組件庫。不得不說現在的組件庫實在太豐富,簡直是我們前端人的福音呀,現在前端也是越來越注重開發體驗的職務,有了組件讓用戶體驗瞬間變得極爲友好。

好了,就介紹這麼多吧,大家也不一定每個都用的上,後面如果有其他的好用的就再更新!

06 好用工具

說到工具,這裏就介紹一下前端人必用的前端工具,大家一定要好好收藏起來。

這是一款接口調試工具,因爲前後端經常有進行交互的操作,使用這個工具可以非常方便地調試,也知道問題出在哪裏,它支持多種請求方法進行調試,也可以進行傳值等各種操作。

谷歌瀏覽器在市場上的佔有率是非常高的,因爲它不僅有良好的瀏覽體驗,更重要的是它有很不錯的調試功能,我這裏介紹的是chromium瀏覽器,都是一樣的,點擊就可以下載了。

這是一款顏色轉換的工具,非常方便你的顏色取值。之前我都是一直使用這一款,但是最近我發現QQ的截圖功能也可以吸取顏色,直接ctrl+c就可以獲取16進制的顏色了,簡直不要太爽。

navicat是一款數據庫管理的軟件,可以方便查看數據庫中的各種表數據等等,但是這是一個收費的軟件,大家看情況需要吧。或者你可以找一些方法來使用,大家知道就好。

這是一個網站的測試工具,可以看到你請求一個網站的時間都花在哪個細節上面了,可以用來優化你的網站。不過我也不常用,只是偶然發現而已。

07 討論社區

首先推薦的就是掘金了,我覺得這裏的文章質量都很高,大家的活躍度也非常不錯,很喜歡這個社區。大家也可以看一下掘金小冊,也很不錯。

思否也是一個不錯的討論社區,我也有很多的困難都在上面找到解決方法。

這個就比較厲害了,上面有全世界的開發者,也是一個活躍的討論社區,有着衆多的牛人幫你解答問題。但是唯一的缺點就是需要你的英文水平比較高,但是你也可以右鍵,翻譯完事。

牛客網在我找工作的這段時間給我的幫助不少,特別是內推方面,上面也有很多公司會發布一些內推的信息,也有很多學長學姐給你推薦,大家一定要收藏這個網站。

這是一個代碼託管的平臺,方便我們平時的項目託管,上面有很多開源的項目,初學者最好的學習方法就是git clone一下,看別人是怎麼寫的代碼,自己的提高肯定很大。同時還有一個碼雲也不錯,國內訪問時比較快的。

另外還有一些像知乎簡書CSDN這種就比較大衆化了,內容質量個人覺得還可以。不過大家也可以去逛一下,你也可以找到不錯的解決方案。

08 個人優秀博客

優秀博客其實也有很多個,這裏我就推薦幾個我認爲是比較好的。

阮老師的博客也是讓我受益匪淺,從中也學到很多有用的知識點和人生道理,上面也記載着阮老師的日誌心得等,非常值得大家去看看。

業界良心的博主,發佈了很多的免費視頻,我看了react那一套覺得講的非常清楚,肯定幫助很多人入門前端。

最後不要臉地推薦一下自己的博客,雖然自己纔剛開始起步,但是寫博客也是對自己的一個成長記錄,也是對自己的一份鞭策吧。我也很希望和大家一起在前端這個圈子裏共同進步,也希望大家可以提出建議。我也開通了自己的公衆號《前端小時》,也是對自己的成長記錄,希望大家關注支持一下哈哈。

博客也不是自己純手工搭建的,也是使用了開源博客系統HEXO進行搭建的。

09 其他好用網站

這個一個CDN的網站,可以輕鬆引入各種CDN,包括vue.js、Element-ui這些。

每次開發使用的圖標我都會在上面查找一下,基本上都可以找到自己想要的圖標,也可以輕鬆下載你想要的尺。

用過一次,上面有各種類型的字體可供大家下載,直接引入就可以使用了。不是很常用,除非一些很特殊的情況下才用。

一個很火的移動端開發框架,可以跨平臺進行開發,也就是說安卓和IOS都可以使用同一套代碼進行編譯。我用過一次,覺得非常不錯,而且入門也是比較簡單的,基本上都是和前端差不多,但是需要上手時間。

一個輪播圖的功能,上面提供了各種輪播圖的樣式以及功能等等,而且也可以在vue.js中配合使用,但是用的也不多,因爲組件庫中也有類似的功能。

10 小結

好了,今天的文章就分享到這裏,本人收藏用的網站和工具都推薦給大家了,資料整理不易,希望大家能夠點贊關注一下,大家如果有好用的工具都可以在文章下方進行留言,我會更新到文章上面。

希望大家能夠好好利用這些網站,提高自己的業務能力,覺得文章不錯也可以關注一下我的公衆號!文章都同步發送!感謝大家!

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章