前端人应该知道的网站和工具

Dear 丶 2023-01-17 07:42 214阅读 0赞

![6bde1dad4d0a28611ffa3ba6b453e090.png][]

## 01 前言 ##

最近有很多初学者在后台留言说：“我是一个小白，怎么才可以快速入门前端呀？”。关于这个问题其实不太好回答，因为这个问题就好像说我是一个穷光蛋如何快速致富一样的道理。但是也不是没有办法回答你这个问题，毕竟掌握一门知识点还是有它的路径的，不能说路径一样，但起码可以参考。

接下来我就以一个初学者走过但已不是初学者的角度来给大家介绍前端人的工具库到底有哪些，如何快速帮你梳理知识点，快速入门（精通靠自己）。

## 02 基础入门 ##

说了基础入门，其实真的是很基础的，我一开始也是这样过来的。无非就是从最简单的html/css开始搞起来，那时候什么都要自己敲，哪有现在组件库这么方便呀！只能说现在的大家太幸福了，所谓前人种树，后人乘凉。但是自己也别忘记树是怎么种的就好。

*  [菜鸟教程][Link 1]

大家应该都知道这个网站，简直就是`初学者的福音`，里面什么都有，但是都很基础。大家可千万不要以为基础就不用心去学，就好像大学学的科目，带有基础二字的书本往往是最难的。可以说前端的小伙伴要是把上面关于前端的过一遍，你就入门了。时间就大概一两周就可以了，而且也是没有什么难度的，假如你是科班出身那就更容易入门了。

*  [W3school][]

这个其实和菜鸟教程差不多，也是基础的标签等知识点，我觉得看菜鸟教程就好了，大家也可以了解一下。

*  [慕课网][Link 2]

这个真的就是我的`启蒙网站`，虽然现在已经不常用了，但是一直都在我的收藏夹第一名。不为什么就是为了一种情怀。这个网站还是我没有上大学之前一位师兄推荐的，那时候主要是学习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][Webpack 1]》这本书，你都会懂很多的知识。

## 04 精美组件库 ##

好啦，到了我最想介绍的一部分了，其实这个也是更方便我们前端的日常业务需要。说白了就是解放了我们前端的开发，不用写复杂的css或者html，`开箱即用`。在这里也非常感谢前端社区做出的巨大贡献。

*  [Element-ui][]

本人非常喜欢这个组件库,因为里面的一些功能都基本上能够满足我的开发需要,而且也是非常容易上手操作,直接CDN引入或者npm安装，任君选择。最重要的是能够配合Vue.js进行项目开发。

*  [Ant Design][]

这是由蚂蚁金服出品的前端组件库，也是非常好用的，说再多还不如大家自己去体验一下，它也是支持前端框架使用，而且现在4.0版本也已经发布了。

*  [Bootstrap][]

这是我最早使用的前端组件库，那时候我发现的时候觉得世界一下子开阔了许多，因为我从基础入门之后就接触这个了，是一位前端的小姐姐推荐的。虽然现在基本上已经不用了，但是还是那句话，情怀所在，也推荐一下。

*  [飞冰][Link 3]

好像这个UI组件库也是挺多人推荐的，是阿里开发的前端组件库，我没有用过，大家可以去看看。

*  [Cube UI][]

这是一个由滴滴公司开发的前端组件库，也是支持Vue.js语法的，本人也没有使用过，大家也可以了解一下。

## 05 小程序开发 ##

最近也是做小程序开发相关的工作，其实小程序开发现在已经方便很多了，因为有了很多小程序框架，接下来就介绍一下。

*  [官方开发][Link 4]

这个就不用过多介绍了，毕竟是老大哥，而且官方也有原生支持的[WeUI组件库][WeUI]，也是非常方便的。

*  [uni-app][]

这是近几年来发展比较好的小程序框架，不仅可以开发小程序，实现多端的开发，还可以编译成APP，想想都让人心动。更重要的是它也支持vue语法，简直不能太爽。

*  [uni-app插件市场][uni-app 1]

说起uni-app不得不提一下它的插件市场，就像我们平时菜市场买菜一样方便，直接拿过来就用，而且还免费。但是也要看清楚是否有一些兼容性问题等。大家下载插件有问题不要喷，因为大家都是为了社区贡献，我们更应该鼓励作者。

*  [uView][]

这是一个掘金小伙伴的评论，我才发现了这个网站，看了一下觉得非常不错，它的官网介绍称这是uniapp生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。我现在还没开始使用，大家可以去试一下，应该是不错的。

*  [Taro][]

这是一个由京东开发的小程序框架，它的介绍是`一处代码，多出运行`，我在很久之前就使用过一次，忘了什么感觉。大家也可以去官网了解一下，说不定不也会爱上这个框架呢！

*  [mpvue][]

这是一个由美团开发的一个小程序框架，也是支持vue.js的语法，而且它也支持小程序的生命周期，也就是说vue的生命周期和小程序的都适用。

*  [vant-weapp][]

最近使用mpvue开发小程序也是使用了这个组件库进行开发，不得不说这是一个非常好的组件库，里面的组件很丰富，能够满足我们的业务开发需要。

*  [View UI][]

这也是一套基于Vue.js的高质量UI组件库。不得不说现在的组件库实在太丰富，简直是我们前端人的福音呀，现在前端也是越来越注重开发体验的职务，有了组件让用户体验瞬间变得极为友好。

## 06 好用工具 ##

说到工具，这里就介绍一下前端人必用的前端工具，大家一定要好好收藏起来。

*  [postman][]

这是一款接口调试工具，因为前后端经常有进行`交互`的操作，使用这个工具可以非常方便地调试，也知道问题出在哪里，它支持多种请求方法进行调试，也可以进行传值等各种操作。

*  [谷歌浏览器][Link 5]

谷歌浏览器在市场上的占有率是非常高的，因为它不仅有良好的浏览体验，更重要的是它有很不错的调试功能，我这里介绍的是`chromium`浏览器，都是一样的，点击就可以下载了。

*  [颜色转换][Link 6]

这是一款颜色转换的工具，非常方便你的颜色取值。之前我都是一直使用这一款，但是最近我发现QQ的截图功能也可以吸取颜色，直接ctrl+c就可以获取16进制的颜色了，简直不要太爽。

*  [navicat][]

navicat是一款数据库管理的软件，可以方便查看数据库中的各种表数据等等，但是这是一个收费的软件，大家看情况需要吧。或者你可以找一些方法来使用，大家知道就好。

*  [WEBPAGETEST][]

这是一个网站的测试工具，可以看到你请求一个网站的时间都花在哪个细节上面了，可以用来优化你的网站。不过我也不常用，只是偶然发现而已。

## 07 个人优秀博客 ##

优秀博客其实也有很多个，这里我就推荐几个我认为是比较好的。

*  [阮一峰][Link 7]

阮老师的博客也是让我受益匪浅，从中也学到很多有用的知识点和人生道理，上面也记载着阮老师的日志心得等，非常值得大家去看看。

*  [技术胖][Link 8]

业界良心的博主，发布了很多的免费视频，我看了react那一套觉得讲的非常清楚，肯定帮助很多人入门前端。

![d8bbdfbc58aa8ea62250968b8ab359fc.png][]

**前端人应该知道的网站和工具都说得差不多了，下面说说零基础小白学web前端到底要学什么？该怎么学**

## 1、编程工具 ##

首先介绍一下编程工具，目前在市面上可以使用的编程工具很多，各种各样。但是编程工具最重要的还是为了编程代码快捷方便。这一点几乎所有的编程工具都可以满足。所以个人认为在编程工具选用方面可以根据自己的喜好来决定，使用哪一款比较的顺手就使用哪一款，比如：sublime,webstrom，vs-code,HBuilder等都是不错的选择，我个人比较喜欢使用vs-code,HBuilder这两款工具。编程工具之所以比较的快捷，就是因为编程工具有代码提示的功能，所以对于初学者，不是很建议使用上面的几款编程工具，初学者对于代码一定要自己能够熟练的、完整的编写出来，这里推荐另一款没有代码意识功能的。适合初学者的一款编程工具：EditPlus，每一款编程工具的安装包可以自行要各自的官网下载安装使用。

## 2、html+css+html5+css3 ##

学习前端首先要学习的就是html+css+html5+css3 这些是前端比较的基础的部分，难度系数较低，基本上是没有什么难度的，主要是一些标签和属性的使用以及页面布局的搭建。这些也是学习前端的入口。很多初学者学到这些知识点的时候可能就会比较的怀疑了。看上去都是英文单词。我英语不好能够学会吗。这也是很多自学者在学习遇到困难的时候开始怀疑自己的一个地方。还是文章开头说的一个观点，做一件事情的结果往往和事件的本身没有什么关系，而是和你做的过程中的种种原因有关系。做编程的朋友就会知道，其实编程的代码虽然是由英文字母组成的，但是和英语的关系真的不是很大，零基础学会达到就业的水平，可以抛开英语的包袱。完全按照学习编程的思维逻辑来，html+css的英语单词是多了一些，在理解的基础上多去操作自然也能够熟练。

## 3、JavaScript ##

当你把html+css+html5+css3都学完了，那么建议去找一些素材，多写一些综合性的静态页面巩固练习自己对代码的实践操作能力。当你能够独立的、很熟练的写出一些综合性的静态页面的时候。就可以学习下一个知识点JavaScript和ES了，但是在学习JavaScript的过程中不要忘了抽时间来回顾前面学过的知识点。千万不要学了后面忘了前面。

JavaScript简称js,是前端比较核心的技术知识点了。也是很多初学者在学习前端的过程中的拦路虎，很多自学的人学到js这里就学不下去了，放弃的很多。如果在看这篇文章的你学到这里感觉比较的难了，希望你坚持，也祝愿你成功。

JavaScript在前端开发中是我无处不在的，是前端技术的难点也是重点。虽然现在很多的企业开发中都是基于前端的主流技术框架在开发的。但是技术框架的底层实现原理依然是原生js。想要在技术上有一个大的提升，一定不要忘了原生js以及js的扩展知识点，比如ES6等。

## 4、JQuery和ajax ##

和学习html+css部分一样的道理，当你把js学完了之后一定要将js和前端学到的html+css+html5+css3相结合。做一些综合性的案例练习。比如去写一些综合性的静态网站之类的。学习编程一定要记住，实践操作十分关键且重要。不要“一看就会，一做就废”。学习中一定要锻炼自己独立操作的能力。

当你把JavaScript都学的很不错了，实践应用方面都练习的很好了，就可以继续学习下一个知识点，这个时候就要学习JQuery和ajax了，JQuery这个工具库在前端的开发历程上也是做出过很大的贡献的。JQuery主要是在原生js基础之上封装的一个技术工具库，在前端开发中也很有必要去学习一下的。前端技术发展到现在，很多人或许会认为JQuery逐渐的用的比较的少了，是否被淘汰了，是不是可以不学习了呢。根据我在编程行业的开发经验来看，建议好好学习一下这个工具库，JQuery的一些思想还是很不错的，况且在实际的开发中，会更具具体的需求做技术选型，多掌握一个技术，对你以后的工作也会有很大的帮助。

## 5、样式框架（bootstrap,elementUI,layUI） ##

每学习一个知识点，我的建议都是一样的，一定要花时间去综合应用，做一些实操练习。到了这里前端的知识点差不多学了一半了，后面主要就是一些技术框架了。这里首先建议大家可以学习一些样式框架，比如bootstrap,elementUI,layUI……等。样式框架主要是在html+css基础之上的封装。很多的样式效果都是在这些框架里面封装好了的。不用再去使用html+css的原代码去调，直接使用就可以的了。样式框架的使用非常简单，可以自行去参考对应的官网学习，这里不再赘述。

说到这里，相信很多人就会有疑问了，自然样式框架都封装好了，为何还要学习html+css+html5+css3这些基础的知识点呢。在这里告诉大家一条定律“基础不牢，地动山摇”。仅仅使用样式框架，把样式框架研究的很透彻也能够满足基本的开发工作，现在在企业很多也是在使用框架在开发的。但是如果没有基础，就是“知其然，不知其所以然”的状态。对于自己以后在技术上的提升有很大的阻碍。况且样式框架中封装的样式特性并不能满足所有的需求。有些时候还是要根据需求去调。所以，基础和框架都十分的重要，都要掌握。

## 6、vue全家桶 ##

除了样式框架之外，前端技术中还有很多的技术框架，这里介绍两个比较主流的，在学习的过程中一定要重点掌握这个框架的使用。在学习两个框架的时候一定要将webpack这个技术好好的掌握一下。熟练掌握这些技术的使用在就业和开发方面也会有很大的帮助。第一和要说的技术框架是VUE，这是目前比较的主流的前端技术框架的了。VUE是基于组件式的开发模式，非常受广大编程人员的喜好。并且在开发行业迅速的被应用起来。

## 7、react框架 ##

要介绍的第二个前端技术框架，是react。这个技术框架现在在企业开发中也是使用率比较的高的。主要是在一些大企业中使用比较的常见。但是各企业在做技术选型的过程中会有差异。在企业中具体使用那一个技术框架开发，要根据企业的需求来。

## 8、node.js ##

如果你是一个前端程序员，你不懂得像PHP、java等后端编程语言，然后你想创建自己的服务，那么建议学习一下node.js，它将是一个不错的选择。Node.js 是运行在服务端的 JavaScript，如果你熟悉JavaSript，那么你将会很容易的学会Node.js。当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。现在都是使用前后端分离开发的模式，学习node.js有有助于你很好的体会和理解前后端交互。

## 9、版本控制器（svn/git） ##

当你把前面的8大内容全部学会并掌握后，对于前端的技术知识点，就差不多的了。但是在实际开发中，基本上都是一个团队协同开发的，那么在开发的过程中又怎么和开发团队的成员共享各自的代码呢，这个时候就要学习一下项目的管理了。开发中通常会使用两个版本控制器来解决这个问题，一个是svn是git，这两个用任何一个即可。目前使用率比较高的一个是git，具体看在企业开发中开发团队的选择。

## 10、小程序开发 ##

当你把前面9个模块的知识点学完了之后，你认为前端的技术就学完了吗，偷偷告诉你，还没有，技术都是在不断的跟新的，学完了前面9个模块的技术知识基本上可以满足企业的基本开发需求。但是最近几年又出现了一个非常热门的技术，就是小程序开发。小程序开发是比较有发展潜力的一个模块。作为一个前端开发人员，掌握小程序的开发技术也是非常的有必要的

## 总结 ##

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你找到满意的工作。

不管你是零基础的萌新，还是想转行的小伙伴 ，只要你想了解前端，精通前端，都欢迎你们加入我们的前端自学团。

在这里，你可以找到志同道合的朋友，相互激励的学习伙伴，还能得到大神的经验分享，和加入项目实战的机会。 想加入自学团的小伙伴赶快行动起来吧 ~

想学习前端web和需要PDF文档的朋友都可以加入这边的企鹅裙，前面：938，，中间：051，，最后：673
    
    裙里从学生到大佬都有，还有资源免费分享，不见不散哦！

![54a6b04f29167333b139d2753f60db9f.png][]

[6bde1dad4d0a28611ffa3ba6b453e090.png]: /images/20221021/c701a5bb326049ae973b9757d4104dc2.png
[Link 1]: https://www.runoob.com/
[W3school]: https://www.w3school.com.cn/
[Link 2]: https://www.imooc.com/
[MDN]: https://developer.mozilla.org/zh-CN/
[Vue.js]: https://cn.vuejs.org/
[Vue CLI]: https://cli.vuejs.org/zh/
[React]: https://react.docschina.org/
[Node.js]: http://nodejs.cn/
[Express]: https://expressjs.com/zh-cn/
[Koa]: https://koa.bootcss.com/
[Webpack]: https://www.webpackjs.com/
[Webpack 1]: https://webpack.wuhaolin.cn/
[Element-ui]: https://element.eleme.cn/#/zh-CN
[Ant Design]: https://ant.design/index-cn
[Bootstrap]: https://www.bootcss.com/
[Link 3]: https://ice.work/
[Cube UI]: https://didi.github.io/cube-ui/#/zh-CN
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/framework/
[WeUI]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
[uni-app]: https://uniapp.dcloud.io/
[uni-app 1]: https://ext.dcloud.net.cn/
[uView]: https://www.uviewui.com/
[Taro]: https://taro.jd.com/
[mpvue]: http://mpvue.com/
[vant-weapp]: https://youzan.github.io/vant-weapp/#/intro
[View UI]: https://www.iviewui.com/
[postman]: https://www.postman.com/
[Link 5]: https://download-chromium.appspot.com/
[Link 6]: https://convertingcolors.com/
[navicat]: https://www.navicat.com.cn/products/navicat-premium
[WEBPAGETEST]: https://www.webpagetest.org/
[Link 7]: http://www.ruanyifeng.com/home.html
[Link 8]: https://jspang.com/
[d8bbdfbc58aa8ea62250968b8ab359fc.png]: /images/20221021/12c01511e7154c74ba2270d0c1479622.png
[54a6b04f29167333b139d2753f60db9f.png]: /images/20221021/01aefd9fd4bf4ecabc063c7ed7a4ec29.png