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

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

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

好了，今天的文章就分享到这里，本人收藏用的网站和工具都推荐给大家了，资料整理不易，希望大家能够点赞关注一下，大家如果有好用的工具都可以在文章下方进行留言，我会更新到文章上面。

希望大家能够好好利用这些网站，提高自己的业务能力，觉得文章不错也可以关注一下我的公众号！文章都同步发送！感谢大家！