前端人应该有的网站和工具

很早就想写一篇文章关于前端人的工具库了，由于我发现其实有了工具，才是成为工具人的基础。

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 小结

好了，今天的文章就分享到这里，本人收藏用的网站和工具都推荐给你们了，资料整理不易，但愿你们可以点赞关注一下，你们若是有好用的工具均可以在文章下方进行留言，我会更新到文章上面。

但愿你们可以好好利用这些网站，提升本身的业务能力，以为文章不错也能够关注一下个人公众号！文章都同步发送！感谢你们！