最近几年，前端技术发展地很快，各种新的框架和技术如雨后春笋般疯狂出现，让很多同学陷入了选择恐惧症。但是到目前为止，前端技术中最重要的仍然是老三件：HTML/CSS和JS。所以如果想做出一个网站，HTML/CSS和JS都是非常重要的。

我知道你现在心里在想什么：hackathon就七天时间，要掌握这么多技术才能写出个网站？我学个C/DLX都要学一学期呢，还这么多，那我退群算了。

这篇文章的目的，就是提供一些现有的框架/工具/教程，希望能帮助你在7天的时间里，拼装出一个好看又有用的网站前端。

在这里强调一下，作者本人目前也还是一个前端小菜鸡，前不久被腾讯AlloyTeam怼得体无完肤，所以如有问题，可以在评论框中指出。本文的重点是根据我自己的经验，让无基础的同学快速入门使用框架的前端开发，能够使用各种框架，在7天的hackathon中，拼装出一个能用的Web前端。只看本文，只会框架，是不能算是会前端的。前端开发有其自己的复杂性，要深入也是一门很深的学问，要不然给普通前端开发开几十万年薪的公司都是傻吗？如果之后还想继续学习前端，可以参考各类面经、权威资料，在能够熟练使用框架的基础上，夯实HTML/CSS/JS基础，再加上多多练习和真实项目实践，相信你可以在毕业后拿到一个很棒的前端offer的。

第一步：学习基础的基础知识

学习顺序和重心

在这个部分，个人认为学习的顺序应该是HTML->CSS->JS，但是重心应该分配成JS>HTML>CSS。

为什么先学HTML？因为HTML是可视化的。你写一个input，就能在页面上出现一个input；你写一个button，就能看到一个button。这种及时反馈对学习的重要不用我强调了吧？同时，HTML也是搭建目前网页布局的基础，不管用什么框架，最后的布局总是以HTML实现的。同样，CSS也是可视化的，所以也应该先学习。

但是呢，HTML和CSS都不需要学习过于深入。一是因为以下要学习的前端框架都会提供各种各样的简化HTML/CSS编写的东西。例如，你现在要让我写一个好看的按钮，我也写不出来，但是选一个好的前端UI库，只需要寥寥几行代码，就能看到一个好看的按钮；再加几个标签，还能给按钮变颜色、加动画。如果你要求不高的话，你甚至可能一行CSS都不需要写。一些UI库（例如bootstrap），还会提供可视化的HTML的布局工具，你甚至连HTML都不用写了。二是因为HTML和CSS过于艰深复杂，因为各种历史惯性和前端需求的复杂性，有各种反人类的知识点。例如说使用CSS居中一个元素看上去这么一个简单的需求，其实现方法比茴字的写法都要多，甚至有人还专门写了一个网站来帮人们做到这个需求。再加上第一条中的原因（UI库的存在），深入学习HTML/CSS在这么短的时间里是没必要的。个人认为，当你能够使用HTML/CSS搭建出一个你心目中的网站的大致布局时，就可以不要再继续深入了。

而JS不太一样。它第一眼看起来和你们比较熟悉的C/Java比较类似，但是呢其实是完全不一样的东西。建议以一个全新的编程语言的态度来学习它。JS在目前前端开发中占据极度重要的位置，而且也是以下将会讲述的前端框架的基础，所以需要非常重视。请直接从ES6的JS开始学习，不要学ES5之前的JS版本。个人认为，你至少需要了解并熟练使用回调函数，和一些ES6的新的特性（Promise，class等），才能算差不多了。

最后呢，还需要了解一些其他知识，例如说在浏览器中输入地址栏到显示网页这个过程中发生了什么、HTTP request和response机制；如果你要使用下面将会提到的除jQuery以外的前端框架（推荐），你还需要了解Node和NPM是什么（nodejs是JS的本地运行时，可以理解成JVM一样的东西，目前前端大部分工具都是运行在nodejs平台上的；NPM是前端包管理工具，可以给一个项目管理和下载依赖包），前后端分离、单页应用(Single Page Application)以及它和传统的多页应用的不同、RESTful API及其设计（包括前端如何与后端交互）等知识，以让你知道你现在写的东西是什么，SPA的前端和后端的关系，以及方便对于前后端接口和后端扯皮。在学习这部分的时候，不要过分深究，看不懂就跳过，能够在不看书的情况下理解大概即可。想要理解地更加深入，需要在真正的项目中认真学习。

以下教程只是抛砖引玉，如果你觉得这些教程有点看不懂/太简单，建议自己去多搜索，尤其是后面几个概念性的知识，建议多看看文章以从不同角度全面理解。

MDN的入门教程，专为啥都不知道的小白设计，快速了解HTML/CSS/JS基础

建议细看，特别是JS部分。

https://developer.mozilla.org/zh-CN/docs/Learn

W3CSchool，可以当reference用的教程，快速了解各种HTML元素和JS语法

看这个教程的时候，每看到一个知识点就自己写写玩玩，用各种HTML元素搭一搭网页。

http://www.w3school.com.cn/html/index.asp

JavaScript教程两则

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

http://www.runoob.com/js/js-tutorial.html

在浏览器中输入地址栏到显示网页这个过程中发生了什么

https://segmentfault.com/a/1190000006879700

HTTP请求和响应

主要看HTTP部分，网络实现部分可以忽略

https://www.jianshu.com/p/c1d6a294d3c0

前后端分离

https://juejin.im/post/5b71302351882560ea4afbb8

RESTful API

http://www.ruanyifeng.com/blog/2014/05/restful_api.html

http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html

Fetch API

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

第二步：选择并学习框架

组件库和UI框架

在这部分开始，我要把框架分为两个大类：组件库和用户界面框架。从现在开始，我们把组件库就称为组件库，把用户界面框架简称为框架。

为什么要这么分？因为他们要解决的问题不一样。

组件库，是来提供一些提前写好的UI组件的。在之前学HTML/CSS的时候，你有没有感觉到这些原生组件都非常丑？有没有感觉到一些看上去很常见的功能，HTML自己都没有提供（比如说弹出框？下拉栏？滚动条？）？你有没有感觉到每次都用CSS手动调样式调布局，非常地麻烦？而组件库，就能够帮你提供一些预先写好地、可供调用的、好看的、常见的组件。组件库就是一个工具箱，你想使用的话，找到其文档里所给出的使用方法，复制粘贴就可以了。

而框架，是为了解决UI开发的一些常见痛点，提供一个写代码的模板（模式）的。举个数据同步的例子：当数据改变的时候，你会使用一些浏览器API操作网页上一些组件的一些属性，以让页面显示和真正的数据同步。比如说，你可能会使用document.getElementyById("id").innerText = "text";来修改一个ID为id的元素的值。那如果现在我想另一个元素的值和这个元素的值同步，你可能会想到提供一个修改值的函数，里面同时修改两个元素的值，如下

function changeValue(text) { document.getElementById("id").innerText = text; document.getElementById("anotherText").innerText = text; }

当需求简单的时候，使用原生JS是最方便的：简单、直观、好调试。但是在真实项目里，需求更加复杂和多变，通过这样手动维护DOM的状态，是非常麻烦且容易出错的。例如说，在以上需求的基础上，想动态生成一个组件，当这个组件存在的时候，其值和text同步；不存在的时候，就不同步。这样需求的变化，都需要你重新设计一下代码；想想在一个真实的、动态的、数据流复杂的项目中，如果像这样一样随意设计，将会有多么容易出错。

这种常见痛点，除了以上提供的数据同步，还包括动画、组件化（你做出了一个好看又好用的按钮，其不只是用CSS就能实现的。而你想在更多地方用它，难道要每次都复制粘贴一边吗？）等。所以，人们就根据这些痛点，开发出了一些前端框架，通过提供一些API、提供一个写代码的模式，帮你解决这些很多程序员都遇到并为之困扰的常见问题。

各个常见框架和组件库

所谓常见框架，这里指的是React, Vue, Angular这三个目前最火的前端框架，以及jQuery，这个老牌的、给行业做出巨大贡献的、但是随着时代的发展行将就木的行业老兵。它们具有目前最多的使用人数、最好的生态系统、最完善的文档（对于一个框架，使用的人越多，生态系统越发达，文档越全面你遇到的问题就更有可能更快地找到解决方案），对于各类开发者、各类需求都提供了比较好的解决方案。使用这些框架，不仅能避开一些前端（乃至整个UI开发）中的一些常见错误，还能借助其生态系统，在不了解其实现的前提下，也能快速拼接出自己想要的功能和界面。

以下将会从个人角度，简单介绍这些框架，适用人群和相关资料。目前这三个框架的官方文档都比较详细，个人认为学习这些框架主要以官方文档为主，然后在做项目的过程中，遇到问题就去网上搜索答案。

对于组件库，一般来说，组件库不受框架约束。但是由于目前常见的框架都对常规HTML/CSS/JS的开发模式有所改变，一些组件库为了迎合框架的开发方式，会直接以框架为基础开发。这样开发出的组件库，可能不容易、甚至不能用在其他框架上。所以这里在介绍框架后，将会介绍推荐使用在这个框架上的组件库。

React（推荐）

我的主力，目前世界上使用最多的前端框架。React对常规HTML/CSS/JS的开发方式进行大的变革，通过引入JSX的语法以及一些社区的CSS in JS方案（即在，使得前端开发能够完全以JS为中心；通过单向数据流模式，解决了数据同步的问题。

个人觉得React有个重大的优势就是API少，概念简单，花在学习API的时间上少，能早点开始做东西。但是React的简单的另一面就是React实现的功能少，一些常见的功能都需要找库来实现（例如路由）。使用React就意味着需要使用React全家桶，例如webpack、react-router甚至redux等，可能会有一些选择恐惧症，以及可能会遇到一些库的坑（开源的东西嘛，你行你上啊）。所以在学习React的时候，建议不要一股脑就上各种三方库，先就用react自己提供的功能尝试实现（例如说，在React Context出现后，很多以前需要使用redux的使用场景，都可以使用Context，以更少的代码解决问题），实在感觉不上库不行的时候（比如说全局状态管理等），再尝试使用第三方库解决。

学习React的过程中还需要注意一点，目前React网络上的教程很多，但是很多教程都是过时的。当你在找React教程的时候，尽可能找新的教程，其中React的版本至少要是16以上。

比较新的中文文档，但是还是落后官方文档一个大版本

https://react.docschina.org/

官方文档

https://reactjs.org/

create-react-app，快速创建react项目

https://github.com/facebook/create-react-app

组件库：Ant Design

阿里推出的React组件库，组件覆盖特别全面，API也比较容易使用。而且除了组件库，阿里还提供了例如动画库、页面模板等很多资源，可以配套使用（在官网footer里找）

https://ant.design/

组件库：reactstrap，Bootstrap组件库的React包装

https://reactstrap.github.io/

Vue（推荐）

Vue是华人开发的一个前端框架，据说有简单易学易上手的特点，有中文文档而且是一直保持更新的，在国内具有极高的人气。其开发模式比较接近传统的前端开发，即模板语言（HTML）、逻辑（JS）和样式（CSS）分离。而且不像React对社区撒手不管的态度，Vue自己也维护一些周边的库，例如说vue-router（路由）、vuex（状态管理）等，能够覆盖前端开发的绝大部分需求，不需要像React一样，一些简单常见的需求都要自己去良莠不齐的第三方库海洋中探索。如果你更认同传统的样式逻辑分离的开发方式，Vue可能更适合你。

官方文档

https://cn.vuejs.org/

组件库：Element UI，饿了么推出的组件库

http://element-cn.eleme.io/#/zh-CN

组件库：Ant Design Vue，是一种Ant Design设计语言在Vue的实现

https://vue.ant.design/docs/vue/introduce-cn/

组件库：Vuetify，Material Design设计语言的Vue实现

https://vuetifyjs.com/

Angular

Angular是Google出的前端框架，具有重量级、全面、难上手的特点。不像Vue和React这种轻量的、只负责用户界面的库，Angular会负责所有前端的各种问题，例如说数据流管理、网络请求、依赖管理等，而且引入了很多后端开发中常见的概念（依赖注入等），让熟悉后端开发（尤其是Spring Boot, ASP.NET Core这种传统的高大全的面向对象设计的库）的人也能够用几乎相同的知识上手前端。Angular不好上手，因为Angular有太多的功能和特性，对于小应用来说，用不上/不需要这些功能，徒增学习成本，用Angular得不偿失；但是当项目规模变大，复杂度变高，这些原本不重要的问题显现出来后，Angular自带这些功能的优势就显现出来了。Angular的高大全还体现在其文档的完备性上，一般来说，在学习的各个阶段，官方文档都能满足你的要求，不需要去自己去做太多的搜索。

个人比较推荐有后端开发经验的同学在构建大项目的过程中尝试使用Angular，在本次hackathon中若不满足大项目的条件，可以避开。

官方文档

https://angular.cn/

官方文档的入门教程，跟着走一遍就可以理解Angular的一些重要的概念

https://angular.cn/tutorial

组件库：Material Design风格的组件的Angular实现。也是由Google自己做的

https://material.angular.io/

原生/jQuery

学习框架总是有成本的。如果你觉得并没有那么多时间学习框架，可以考虑直接使用原生或者jQuery库进行开发。因为大部分项目的复杂度其实并没有使用框架的必要，引入框架所带来的成本可能小于它所能带来的收益。例如说如果你的网页上只有一个输入框和一个按钮，那直接使用原生JS进行DOM操作完全足够了，不需要引入框架。

而对于jQuery，jQuery在2019年应该说算是走完了它的生命周期了，因为它所尝试解决的一些问题（浏览器API不统一等）已经随着Web标准的发展已经解决了，目前引入jQuery只能是徒增学习成本。但是有的时候一些库（特别是一些老牌的库）需要依赖jQuery，这时候只需要依赖一下就可以了。

个人推荐要使用传统开发模式（MVC，模板语言，即不采用前后端分离）的团队采用原生的开发方式。

组件库：Bootstrap，享誉世界的CSS库，各种资料、模板一应俱全，互联网上资料也是特别多。注意，有的组件需要引入jQuery。

https://v4.bootcss.com/

组件库：Semantic UI，另一个简单的库

https://semantic-ui.com/

第三步：写更好的代码

当你跟着第二步，学习了一个框架的基本使用后，你应该已经可以在七天时间拼装出一个能用的网站了。这一部分将会为一些愿意深入了解前端、写出更好更容易维护的代码、做出更好的网站的同学，给出一些进阶的资料以便参考。如果你没有时间，可以跳过这个步骤，但是强烈建议在以后的学习中对这些知识都有所了解。

TypeScript

JavaScript作为一个第一个版本只用了一个人10天就做出来的语言，其设计有一些缺陷，类型系统的缺失即为缺陷之一。弱类型让很多习惯于写强类型语言的开发者感觉极为不便（例如缺乏IDE支持、代码难以维护等），也让很多错误不能及时被找出（当然弱类型也有其灵活性的好处）。随着JS在全世界的爆红，微软提出了TypeScript语言，其在保持动态语言的灵活性的同时，引入类型系统，帮助开发者在开发时就能找到潜在的错误，并获得来自IDE的诸如自动补全等支持，减少开发者在开发时的心智负担。TypeScript目前已经接受到全世界开发者的好评，一般来说前端开发者都应该了解一些TypeScript的知识，并尝试在实际的项目开发中引入TypeScript。

https://www.typescriptlang.org/

开发前端应用的时候，不可避免地需要和后端服务器进行交互。但是在前后端分离的架构模式下，前后端是独立开发的，两端的进度不会一样。有时候前端在做一个功能的时候，需要和后端交互，但是此时后端还没有做好，该怎么办呢？此时前端应该开启一个虚假的服务器，这个服务器会实现接口文档中的接口定义，但是其数据都是固定的/易于生成的。这样的服务器就称为一个Mock服务器。这样，事先实现一个Mock服务器，前端在开发过程中，就可以只和Mock服务器交互而不和真正的后端服务器交互，提高效率，也避免了两端开发进度不同步带来的问题。当然，在最后的测试阶段，也需要和真正的服务器后端交互进行测试。

你可以尝试在前端抽象出一个网络层，接管所有网络请求，并在此层做Mock和真实地址的切换；一些常见的HTTP请求库（例如axios）都会自带Mock的功能；如果不想自己折腾，GitHub上很多库和工具能够根据接口文档或者手动输入，快速搭建一个Mock服务器，这里就不举例了。

https://juejin.im/post/5c0a34f3e51d451dd867951c

https://juejin.im/entry/57bd37c2c4c9710061606b38

一般来说，测试的重要性很难被学生理解：一方面是课程中对学生项目的考察中一般不会以功能为主，不会过分深究代码质量和正确性；另一方面是本来学生项目的时间比较紧张，而写测试需要花费大量的精力和时间。并且，对于快速变化、对于需求通常没有严谨的定义的前端项目来说，进行完整的单元测试是几乎不可能的。但是，写完备的单元测试能够确保一个功能的正确性，能够有效杜绝“在我的电脑上明明可以的！”这样的问题。为了在效率和正确性上取得一个平衡，可以尝试在一些关键逻辑上写一些单元测试，以保证这些核心功能不会出错，提高交付时的信心。

一个React的单元测试库

https://github.com/kentcdodds/react-testing-library

如果你的项目需要最终部署到网站上，与其每次更新后都手动打包上传，可以尝试下使用持续集成/持续部署工具，让打包->测试->发布这个过程自动化。如果你还写了单元测试，持续集成的过程中还会自动运行测试，并在测试未通过的时候阻止部署，防止将错误的代码交付给用户。

Travis CI

https://travis-ci.org/

持续集成

https://juejin.im/entry/5893590a128fe1006545a980

持续部署

https://cnodejs.org/topic/5885f19c171f3bc843f6017e

在这篇文章中，作者根据最近的前端开发经验，给出了一些短时间内快速入门前端开发的方法、技巧、经验和资料，希望能够帮助在短时间内拼装出一个能看能用的前端网站。再次强调本篇文章并不是让读者能够短时间精通前端。如果对前端有兴趣，建议使用权威的资料对前端知识进行系统性的学习。如果有读者有什么问题或者建议，请在下面的评论中留言。