一、旧世界的Web

后端

（1）刚开始，web后端基本都是php写的，脚本化的语言，嵌入到HTML里面很方便。

（2）然后Java开始发力，JSP+Servlet成为主流。

（3）发现Java又臭又长，开始把一些常用的思路封装成类，于是Spring成长了起来，且具有两个核心概念AOP切面、IoC控制反转。这两个思想简直无敌。

AOP：例如，我们程序的每个地方都可能抛异常，以前每个地方都要try、catch十分繁琐，且catch后的处理大同小异。如果有一个切面，把Web的出口拦截了，所有流量都会经过这个切面，一旦拦截到异常抛出，则返回对应的错误码，这样很多地方都只需要抛异常，不需要catch了，少些好多代码不说，还统一了异常处理的方式。这只是AOP最简单的一个应用。

IoC：Spring提供了一个容器的概念，把所有需要实例化的类都new出来一个对象，称为Bean（类似豌豆里面的本站），当类A需要类B的时候，就把管理的类B对象像挤本站一样注入到类A里面去。这样解开了类之间的耦合，想要什么就拿什么，相互之间没有前置的依赖关系，我获得类A的时候不需要去管类A的构造方法里面还需要先实例化一个类B、一个类C…当然实际上类之间有很多复杂的引用关系，实例化的先后顺序以及依赖循环异常交给Spring来管理就好。

（4）由于人继续变懒，Spring的XML也不想写了，于是出了Springboot这种东西，口号是“约定大于配置”，把一些基本的参数都设定好了，如果不需要改的话直接引用pom就可以使用了，如果要改的话，只需要配置application.yml文件里面的可选参数就可以了，如果还想更深地自定义的话，就写一个config bean就好了，所有的config bean和application.yml都会被自动注入，不需要再写XML说哪个bean所在的类叫什么名字，id是什么，怎么初始化等等。使用Jetbrains的IDEA集成开发环境，同写Java会变得极其简单，编码量减少且易于维护。

（5）未来：肯定是Go的天下呀。

前端

（1）最开始：HTML+CSS+JS三大金刚

（2）发现JS满足不了欲望了，想发展更方便脚本，于是Jquery出来了。

由于HTML含有太多重复的语句，因此JSP等前后端结合语言得以出现。Thymeleaf现在仍可用于Springboot，它为后端开发者提供了专门向前端小白介绍的工具。

前端专家们发现前端门槛太低，于是他们通过“组件”思维来管理重复的代码，提高门槛。比如我好不容易用HTML+CSS+JS写了一个非常漂亮的Table，但是每次使用我都要复制所有的代码过去，有一点点改动就要改所有复制的地方。如果这个Table是一个组件，我只需要引用它，然后把数据传给它，它就可以自动渲染成HTML，并引用相关CSS和JS，该多好。另外，每次都要去考虑兼容什么浏览器，多麻烦，如果有个脚本，输入要支持哪些版本的哪些浏览器，用一种高级点的语言写，然后编译的时候自动转换成兼容各种浏览器的原生HTML+CSS+JS，这样难道不香吗。这就出来了现代前端语言。现代前端语言的基础是React，用JS编织一切。React还是比较原生，所以在其之上衍生出了各种框架，出名的有Vue和Ant Design，它们封装好了一些常用的思路，以及JS生成HTML这种基本操作。我真的想说，入门难度太高了……

二、打开新世界Vue的大门

1、基本概念

• Node.js是一种JavaScript运行环境，旨在专门用于执行JavaScript代码。类似于java -jar xxx.jar的命令，比如执行node xxx.js

• npm：node.js包管理。类似于Java的Maven和Gradle，JavaScript也有npm，用于版本控制和引用已经写好的JavaScript代码。

• ES6：ECMAScript 6，就是javascript的新版本，比原生javascript更好写。

• Babel：用来将ES6、ES7等高级版本js转为低级版本js语言，便于兼容各种运行平台的脚本

• vue-cli：就是vue的命令行工具

• vue-router：前端有个重要的概念叫做“路由”，其实就是管页面URL怎么跳转的，这是vue的路由组件。

• webpack：将所有的前端项目代码打包和压缩到一起，可以编译高级语言（比如CSS的高级语言SCSS、LESS）、降低代码冗余、按需加载文件，还可以区分多个环境配置，还可以压缩图片、字体等文件，还能热加载（保存代码后立刻显示到浏览器而无需重启服务）

2、npm

由于npm非常火，在高版本的node.js里面，已经集成了npm

3、Vue

大概了解下vue是什么。

• 语法：vue在语法上类似标签版本的JSP动态网页语言，或者非常类似themeleaf。

• 组件：vue的一切都是组件，你可以把HTML+CSS+JS封装在一起自定义一个组件。

• 路由：本质就是，给什么URL，应该返回什么组件。

• 封装好的一些功能：比如mounted可以在网页加载时处理内容，data可以定义一些变量且发生改动的时候自动渲染局部组件，methods可以定义一些js函数等等

CSS你可以用SCSS等语言来编写，可以加scope关键字来限制css的作用范围，且只需要import就可以引用任何其他的组件，定义好的组件可以直接以HTML标签的形式来书写，通过data来传参，例如：

<mytitle title="123"></mytitle>

核心就是用高级语言更懒地去写HTML+CSS+JS……

4、element-ui

element-ui是饿了么出的一个前端UI，它已经设定好了一些精美的组件，你只需要把这些组件拼凑成一个个网页，而不需要从头自己一个一个去写组件了。

这些组件，如单选框、表格、进度条等，设计十分精美，只需传入数据即可呈现。如果觉得有不好看的地方，可以自己覆写CSS来更换，对于功能需求强烈、界面设计无所谓的中台页面、后台页面而言，十分方便。

5、为什么不用layui

从我接触前端以来，一直用的都是layui。后面发现它更适合于在原生HTML+CSS+JS/Jquery基础上来优化页面显示效果，而不太兼容现代前端语言的思路。它带有一些预设的jQuery初始化和事件触发方式，与Vue的写法不太兼容。此外，一些组件如tooltip、popover并不包含在内。