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

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

01 前言

最近有不少初學者在後臺留言說：「我是一個小白，怎麼才能夠快速入門前端呀？」。關於這個問題其實不太好回答，由於這個問題就好像說我是一個窮光蛋如何快速致富同樣的道理。可是也不是沒有辦法回答你這個問題，畢竟掌握一門知識點仍是有它的路徑的，不能說路徑同樣，但起碼能夠參考。

接下來我就以一個初學者走過但已不是初學者的角度來給你們介紹前端人的工具庫到底有哪些，如何快速幫你梳理知識點，快速入門（精通靠本身）。

02 基礎入門

說了基礎入門，其實真的是很基礎的，我一開始也是這樣過來的。無非就是從最簡單的html/css開始搞起來，那時候什麼都要本身敲，哪有如今組件庫這麼方便呀！只能說如今的你們太幸福了，所謂前人種樹，後人乘涼。可是本身也別忘記樹是怎麼種的就好。

• 菜鳥教程

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

• W3school

這個其實和菜鳥教程差很少，也是基礎的標籤等知識點，我以爲看菜鳥教程就行了，你們也能夠了解一下。

• 慕課網

這個真的就是個人啓蒙網站，雖然如今已經不經常使用了，可是一直都在個人收藏夾第一名。不爲何就是爲了一種情懷。這個網站仍是我沒有上大學以前一位師兄推薦的，那時候主要是學習c++的課程，後來就跑去學前端了（由於簡單）

上面不少都是收費的課程，可是也有不錯的免費課，不想看書或者教程的同窗能夠選擇去看慕課網。

• MDN

這個也是比較基礎的文檔，內容的話比前兩個稍有深度，知識講解也是比較到位的，平時查閱的時候能夠做爲本身的文檔，網站的佈局我以爲是不錯的，知識分類頁很是有條理。

03 進階鍛鍊

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

• Vue.js

這是一個很是容易上手的前端框架，前提是你已經通過了基礎入門的鍛鍊。並且它的周邊以及生態都很是完善，也有不少支持的組件庫，後邊會介紹。因此強烈推薦你們去學習這個框架，可以作一寫簡單的效果之類的，找到前端的樂趣。

• Vue CLI

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

• React

由於我對react的技術棧不是很熟悉，我只停留在文檔上面，可是也作過簡單的demo，知道引用組件、業務拆分等的思想，我的以爲其實和vue都是差很少的，也是組件化的思想，你們也要去學習一下。

• Node.js

因爲Node.js的出現，前端工程師就像如虎添翼同樣進入了服務端開發，讓JavaScript成爲了一門可以在服務端運行的語言，以前咱們的後端都用比較主流的Java，Python以及其它的後端語言來編寫，如今可使用JS來編寫了，想一想都以爲使人激動。並且如今也出現了兩種比較成熟的框架，讓前端也能輕鬆開發全棧應用，你們能夠看一下Express、Koa框架。

• Webpack

要是你想全面地瞭解webpack打包工具，那麼你就必需要好好讀它的文檔，裏面有不少關於webpack的屬性配置，你能夠知道每個配置的做用，並且你們使用的時候必定要注意版本的問題，不少詭異的錯誤只要降級一下均可以解決。若是想要探究原理、優化等能夠看《深刻淺出Webpack》這本書，你都會懂不少的知識。

由於我沒有接觸過Angular，因此我就很少說這個，可是不排除也有公司使用angular技術，你們有時間也要多去了解一下吧。 我要了解

04 精美組件庫

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

• Element-ui

本人很是喜歡這個組件庫,由於裏面的一些功能都基本上可以知足個人開發須要,並且也是很是容易上手操做,直接CDN引入或者npm安裝，任君選擇。最重要的是可以配合Vue.js進行項目開發。

• Ant Design

這是由螞蟻金服出品的前端組件庫，也是很是好用的，說再多還不如你們本身去體驗一下，它也是支持前端框架使用，並且如今4.0版本也已經發布了。

• Bootstrap

這是我最先使用的前端組件庫，那時候我發現的時候以爲世界一會兒開闊了許多，由於我從基礎入門以後就接觸這個了，是一位前端的小姐姐推薦的。雖然如今基本上已經不用了，可是仍是那句話，情懷所在，也推薦一下。

• 飛冰

好像這個UI組件庫也是挺多人推薦的，是阿里開發的前端組件庫，我沒有用過，你們能夠去看看。

• Cube UI

這是一個由滴滴公司開發的前端組件庫，也是支持Vue.js語法的，本人也沒有使用過，你們也能夠了解一下。

05 小程序開發

最近也是作小程序開發相關的工做，其實小程序開發如今已經方便不少了，由於有了不少小程序框架，接下來就介紹一下。

• 官方開發

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

• uni-app

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

• uni-app插件市場

提及uni-app不得不提一下它的插件市場，就像咱們平時菜市場買菜同樣方便，直接拿過來就用，並且還免費。可是也要看清楚是否有一些兼容性問題等。你們下載插件有問題不要噴，由於你們都是爲了社區貢獻，咱們更應該鼓勵做者。

• uView

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

• Taro

這是一個由京東開發的小程序框架，它的介紹是一處代碼，多出運行，我在好久以前就使用過一次，忘了什麼感受。你們也能夠去官網瞭解一下，說不定不也會愛上這個框架呢！

• mpvue

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

說了這麼多，給你們推薦一下我以爲很是不錯的小程序資料彙總，每次開發小程序都會看一下到底用什麼好，別人總結的很是好！微信小程序開發資源彙總

• vant-weapp

最近使用mpvue開發小程序也是使用了這個組件庫進行開發，不得不說這是一個很是好的組件庫，裏面的組件很豐富，可以知足咱們的業務開發須要。

• View UI

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

好了，就介紹這麼多吧，你們也不必定每一個都用的上，後面若是有其餘的好用的就再更新！

06 好用工具

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

• postman

這是一款接口調試工具，由於先後端常常有進行交互的操做，使用這個工具能夠很是方便地調試，也知道問題出在哪裏，它支持多種請求方法進行調試，也能夠進行傳值等各類操做。

• 谷歌瀏覽器

谷歌瀏覽器在市場上的佔有率是很是高的，由於它不只有良好的瀏覽體驗，更重要的是它有很不錯的調試功能，我這裏介紹的是chromium瀏覽器，都是同樣的，點擊就能夠下載了。

• 顏色轉換

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

• navicat

navicat是一款數據庫管理的軟件，能夠方便查看數據庫中的各類表數據等等，可是這是一個收費的軟件，你們看狀況須要吧。或者你能夠找一些方法來使用，你們知道就好。

• WEBPAGETEST

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

07 討論社區

• 掘金

首先推薦的就是掘金了，我以爲這裏的文章質量都很高，你們的活躍度也很是不錯，很喜歡這個社區。你們也能夠看一下掘金小冊，也很不錯。

• 思否

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

• stackoverflow

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

• 牛客網

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

• github

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

另外還有一些像知乎、簡書、CSDN這種就比較大衆化了，內容質量我的以爲還能夠。不過你們也能夠去逛一下，你也能夠找到不錯的解決方案。

08 我的優秀博客

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

• 阮一峯

阮老師的博客也是讓我受益不淺，從中也學到不少有用的知識點和人生道理，上面也記載着阮老師的日誌心得等，很是值得你們去看看。

• 技術胖

業界良心的博主，發佈了不少的免費視頻，我看了react那一套以爲講的很是清楚，確定幫助不少人入門前端。

• 個人博客

最後不要臉地推薦一下本身的博客，雖然本身才剛開始起步，可是寫博客也是對本身的一個成長記錄，也是對本身的一份鞭策吧。我也很但願和你們一塊兒在前端這個圈子裏共同進步，也但願你們能夠提出建議。我也開通了本身的公衆號《前端小時》，也是對本身的成長記錄，但願你們關注支持一下哈哈。

博客也不是本身純手工搭建的，也是使用了開源博客系統HEXO進行搭建的。你們也能夠搭建屬於本身的博客系統，簡單上手！能夠看以前我寫的搭建博客的文章《小白也能搭建博客》

09 其餘好用網站

• BootCDN

這個一個CDN的網站，能夠輕鬆引入各類CDN，包括vue.js、Element-ui這些。

• 字體圖標

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

• 字體類型

用過一次，上面有各類類型的字體可供你們下載，直接引入就可使用了。不是很經常使用，除非一些很特殊的狀況下才用。

• Flutter

一個很火的移動端開發框架，能夠跨平臺進行開發，也就是說安卓和IOS均可以使用同一套代碼進行編譯。我用過一次，以爲很是不錯，並且入門也是比較簡單的，基本上都是和前端差很少，可是須要上手時間。

• 輪播圖

一個輪播圖的功能，上面提供了各類輪播圖的樣式以及功能等等，並且也能夠在vue.js中配合使用，可是用的也很少，由於組件庫中也有相似的功能。

10 小結

好了，今天的文章就分享到這裏，本人收藏用的網站和工具都推薦給你們了，資料整理不易，但願你們可以點贊關注一下，你們若是有好用的工具均可以在文章下方進行留言，我會更新到文章上面。

但願你們可以好好利用這些網站，提升本身的業務能力，以爲文章不錯也能夠關注一下個人公衆號！文章都同步發送！感謝你們！