前端面试题（持续更新中）

前端面试题

全家桶项目源码：Vue全家桶+SSR+Koa2全栈开发美团网[完整版] 链接：https://pan.baidu.com/s/1cwPDVkj_I5z568mYIHni4A 提取码：24g2

CSS面试题：
1、谈谈你对CSS盒模型的认识？

1、基本概念：标准模型+IE模型、标准模型 与 IE模型区别
（1）W3C定义的盒子模型包括margin（边界）、border（边框）、padding（填充）、content（内容） ，元素的width=content的宽度
（2）IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content（内容）+padding（填充）+border（边框）
区别：标准盒子模型的content的宽高不包含其他部分，但是IE盒子模型的content部分把padding（填充）和border（边框）计算了进去。

2、CSS是如何设置这两种模型，那么二者怎么转化呢？

box-sizing: content-box: 指的是W3C标准盒模型，也是默认的设置属性。
box-sizing: border-box：指的是IE盒模型，width和height包含了padding和border。

3、JS如何获取盒模型对应的宽和高？

dom.style.width/height：对节点样式可读可写，但只能读或写内嵌的CSS样式对于在(style)或外联样式不能读写。
dom.currentStyle.width/height：拿到的是渲染之后的宽和高，比较真实，但支持IE浏览器
window.getComputedStyle(dom).width/height：方法是只读的，只能获取样式，不能设置。
dom.getBoundingClientRect().width/height：getBoundingClientRect()方法得到8个值，除了 width 和 height 外的属性x、y、left、top、right和bottom都是相对于视口(viewport)的左上角位置而言的。

4、什么是BFC？BFC的原理?

块级格式化上下文。是一种边距重叠解决方案。
处于同一个BFC中的元素相互影响，可能会发生margin collapse(边距坍塌&边距重叠)；
BFC在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，包括浮动元素也参与计算；
浮动盒的区域不会叠加到BFC上；

5、行内元素和块级元素有什么区别？

块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，块级元素可以设置宽高，如p,ul,form,div,(h1-h6)等标签元素
行内元素：元素在一行内水平排列，高度由元素的内容决定，行内元素不可以设置宽高，如a,br,span,input等元素。

6、行内元素和块级元素如何转换？

在行内元素中设置display:block:就可以让行内元素变成块级元素，display：inline-block(可以在同一行内显示)。
在块级元素中设置display：inline;就可以让块级元素变成行内元素。

7、什么是伪类选择器和伪元素？列举3个CSS3中引入的伪类选择器和伪元素！

伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
伪元素选择器：dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有）

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
::selection用来改变浏览网页选中文的默认效果

伪类选择器：一个概念上的类，不是我们定义的，是抽象的。如a:hover，选择a标签（元素选择器）中具有鼠标悬停类的所有元素，这个类是抽象的，不是我们自己定义的，再如first-child，选择第一个，选择具有这个类性质的所有元素，“第一个”，这个类就抽象了，我们没必要定义一个第一个这样的类

列举：:root()选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是（html）。:root选择器等同于（html）元素。
:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

8、px和em，rem的区别？

px 实际上就是像素，用PX设置字体大小时，比较稳定和精确。px是固定长度单位，不随其它元素的变化而变化
em 就是根据基准来缩放字体的大小。em 是相对长度单位。em是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化
rem是CSS3新增的一个相对单位,rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化

9、关于flex布局

flex布局可以实现空间自动分配，自动对齐，flex布局是与方向无关的
给父元素加上一个display : flex;
给父元素和子元素添加属性

10、关于绝对定位，相对定位和固定定位

1、相对定位的元素不会脱离文档流，占用文档流的空间，绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。

2、绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页。

3、固定定位：相对于浏览器窗口进行定位
相对定位：position: relative;
绝对定位：position: absolute;

#JS的面试问题：
0、如何判断一个变量是对象还是数组？

1、我们能够使用typeof判断变量的身份，判断字符串得到string，数字和NaN得到number，函数会得到function等，但是判断数组，对象和null时都会得到object，这就是typeof的局限性，
2、使用instanceof（比较运算符）可以用来判断一个变量是数组还是对象
3、constructor（构造函数）
4、Object.prototype.toString.call()
总结 判断简单数据类型可以用typeof，判断数组，对象使用instanceof，constructor和 Object.prototype.toString.call()，最好使用Object.prototype.toString.call()，更加精准

1.闭包

闭包就是能够读取其他函数内部变量的函数。
逼格比较高点的回答：外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象
创建闭包最常见方式，就是在一个函数内部创建另一个函数。
闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都
永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数本

2.数据类型

基本数据类型：String,Boolean,number,Null,undefined,object,
字符串 布尔 数值 空值 未定义 对象
引用数据类型：Object(Array,Date,RegExp,Function)

3.javascript 中 == 和 === 的区别是什么？举例说明。

===会自动进行类型转换，==不会

4.请尽可能详尽的解释 ajax 的工作原理

思路：先解释异步，再解释 ajax 如何使用
Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，
然后用javascript来操作DOM而更新页面。
XMLHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的
技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。
达到无刷新的效果。
特点：Ajax 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；
按需获取数据，节约带宽资源

HTTP协议类型题目：
5. HTTP 状态消息 0 200 2 302 4 304 3 403 4 404 0 500 分别表示什么

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
302：请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当
继续向原有地址发送以后的请求。只有在Cache-Control或 Expires中进行了指定的情况下，
这个响应才是可缓存的
304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上
次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁
止包含消息体，因此始终以消息头后的第一个空行结尾。
403：服务器已经理解请求，但是拒绝执行它。
404：请求失败，请求所希望得到的资源未被在服务器上发现。
500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这
个问题都会在服务器端的源代码出现错误时出现。

6.说一下什么是Http协议

对客户端和服务器端之间数据传输的格式规范，格式简称为“超文本传输协议”

7.什么是Http协议无状态协议?怎么解决Http协议无状态协议?

(1)、无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息
(2)、无状态协议解决办法： 通过1、Cookie 2、通过Session会话保存。

8.Http协议中有哪些请求方式?

GET:用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器，从指定的资源请求数据
POST:用于传输信息给服务器, 向指定的资源提交要处理的数据
PUT:传输文件,报文主体中包含文件内容,保存到对应URI位置
HEAD:获得报文首部,与GET方法类似,只是不返回报文主体,一般用于验证URI是否有效
DELETE:删除文件,与PUT方法相反,删除对应URI位置的文件
OPTIONS:查询响应URI支持的HTTP方法

9.Http协议由什么组成?

请求报文包括三部分:
(1).请求行:包含请求方法,URI,HTTP版本协议 (2).请求首部字段 (3).请求内容实体
响应报文包含三部分:
(1).状态行:包含HTTP版本,状态码,状态码原因短语 (2).响应首部字段 (3).响应内容实体

10.HTTP协议的工作原理?

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息，通常情况下会配合数字证书实现。

11.如何进行网站性能优化？

1、减少请求数；
2、css放头部，js放底部；
3、合理利用缓存，提升网络传输速率；
4、减小请求资源体积

12.什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有
的人能在这些设备上让网站运行正常

13.ajax的同步和异步区别：

同步：阻塞的：同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返 回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步：非阻塞的:异步是指进程不需要一直等下去， 而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

14.跨域? ?

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

14-1、什么情况下会碰到跨域问题？有哪些解决方法？

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。
解决方法：1. JSONP是服务器与客户端跨源通信的常用方法，Jsonp 需要目标服务器配合一个callback函数网页通过添加一个(script)元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
首先，网页动态插入(script)元素，由它向跨源网址发出请求。
2.通过修改document.domain来跨子域
3.使用window.name来进行跨域
4.通过CORS解决AJAX跨域

15.简述 ajax 的过程。

1. 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
3. 设置响应 HTTP 请求状态变化的函数
4. 发送 HTTP 请求
5. 获取异步调用返回的数据
6. 使用 JavaScript 和 DOM 实现局部刷新

16.axios和ajax的区别

==axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

②axios特征：
1.自动转换JSON数据
2.从 node.js 创建 http 请求
3.支持 Promise API
4.客户端支持防止CSRF
5.提供了一些并发请求的接口
PS：防止CSRF：就是让你的每个请求都带一个从cookie中拿到的key，根据浏览器同源策略，假冒的网站是拿不到你cookie中得到key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略

17.JavaScript 链 原型，原型链 ? 有什么特点？

1. 原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链
2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

3.每一次获取对象中的属性都是一次查询过程，如果在自有属性中找不到就会去原型对象中查找，如果原型对象中还查不到，就回去原型对象的原型中查找，也就是按照原型链查找，直到查找到原型链的顶端，也就是Object的原型。

18、JS创建对象有几种方法？

1.new Ｏbject()
2.使用字面量
3.工厂模式
4.构造函数模式（constructor）
5.原型模式（prototype）
6.构造函数+原型模式
还是点击下面链接讲解的比较详细吧 ↓
https://www.jianshu.com/p/1fb0447db852

19、虚拟dom和实体dom的区别？

DOM的本质：
浏览器概念，浏览器从服务器端读取html页面，浏览器将html解析成一棵元素嵌套关系的dom树，用对象来表示页面上的元素，并提供操作dom对象的api。
虚拟DOM：
框架概念，程序员用js对象来模拟页面上dom元素的嵌套关系( 本质 )，为了实现页面元素的高效更新( 目的 )
区别：1、虚拟DOM不会进行重排与重绘操作；
2、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后进行重排和重绘，减少过多DOM节点重排和重绘损耗。
3、虚拟DOM有效降低大面积（真实DOM节点）的重排和重绘，因为最终与真实DOM比较差异，可以局部渲染

20、描述一下事件冒泡机制

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

21、请描述一下cookies，sessionStorage和localStorage的区别

cookie（储存在用户本地终端上的数据）是网站为了标识用户身份而储存在用户本地终端上的数据，cookie数据始终在同源的http请求中携带，只会在浏览器和服务器间来回传递。另外两个不会自动把数据发给服务器，仅在本地保存。

VUE方面的问题：
1.谈谈你对MVVM开发模式的理解

Vue是一个 MVVM框架，其各层的对应关系如下:
View层：在Vue中是绑定dom对象的HTML(代表UI视图，负责数据的展示；)
ViewModel层：在Vue中是实例的vm对象 (负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；)
Model层：在Vue中是data、computed、methods等中的数据(代表数据模型，数据和业务逻辑都在Model层中定义；)
在 Model 层的数据变化时，View层会在ViewModel的作用下，实现自动更新

2、Vue的响应式原理？

Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响
Vue中编写了一个wather来处理数据
在使用getter方法时，总会通知wather实例对view层渲染页面
同样的，在使用setter方法时，总会在变更值的同时，通知wather实例对view层进行更新

3、Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
vue的生命周期各阶段都做了什么？
beforeCreate: 实例创建前：这个阶段实例的data、methods是读不到的
created: 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，
$el属性目前不可见，数据并没有在DOM元素上进行渲染beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。mounted：el选项的DOM节点被新创建的vm.$el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
beforeUpdate： 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
updated： 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
beforeDestory： 实例销毁之前调用。
destroyed： Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

4、请详细说下你对vue生命周期的理解？

答：总共分为8个阶段：创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

5、vue生命周期在真实场景下的业务应用

created： 进行ajax请求异步数据的获取、初始化数据
mounted： 挂载元素内dom节点的获取
nextTick： 针对单一事件更新数据后立即操作dom
updated： 任何数据的更新，如果要做统一的业务逻辑处理
watch： 监听具体数据变化，并做相应的处理

7、Vue中双向数据绑定是如何实现的？

双向数据绑定只存在于form表单元素中
首先双向数据的绑定需要通过 v-model 来将数据关联起来，
其次在 data 中一定要定义好通过 v-model 关联的数据，
Vue 在实现数据监听只能够监听到 data 中的数据，
如果在 data 中没有定义该数据，那么将无法实现监听 ，
同时也无法实现表单的双向数据绑定
vue.js是采用数据劫持，并结合发布者——订阅者的模式：通过Object.defineProperty()来劫持vue中各个属性的setter、getter，在数据变动的时候，再发布消息给订阅者

8、父组件与子组件传值

父向子传值：属性传值，父组件通过给子组件标签上定义属性，子组件通过props方法接收数据；
子向父传值：事件传值，子组件通过$emit(‘自定义事件名’，值)，父组件通过子组件上的@自定义事件名=“函数”接收($emit方法传递参数)

9、DOM树渲染在哪个周期中完成?

mounted钩子

10、 如何让css只在当前组件中起作用

将当前组件的 (style)修改为(styple scoped)

11、第一次加载页面会触发哪几个钩子

第一次加载会触发 beforeCreate、created、beforeMount、mounted四个钩子

12、Vuex是什么？

Vuex是专门为Vue服务，用于管理页面的数据状态、提供统一数据操作的生态系统
Vuex采用MVC模式中的Model层，规定所有的数据必须通过action—>mutaion—>state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。
vuex:是vue提供的状态管理工具，简单解释就是vue各个组件直接的变量是不能直接共享的，组件直接的参数传递才多层的时候变得异常复杂，所以就诞生了vuex的状态管理工具，保证了状态的统一和可追踪

13、router是什么？

vue-router:是vue生态里面的路由工具，采用路由能轻松实现单页面程序
route是路由信息对象，包括path,params,hash,query,fullPath,matched,name等路由信息参数。
router是路由实例对象，包括了路由的跳转方法，钩子函数。

14、vue单页面应用及优缺点

vue核心是一个响应的数据绑定系统，mvvm，数据驱动，组件化，轻量，简洁，高效，快速，模块友好。
缺点：不支持低版本浏览器，最低到IE9，不利于SEO的优化，首页加载时间较长，不可以使用浏览器的导航按钮需要自行实现前进后退。

15、vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

16、vue.nextTick()的用处？

nextTick可以使我们在下次DOM更新循环结束之后执行延迟回调，用于获得更新后的DOM。

17、props和emit的区别？

父组件通过props传递数据给子组件，子组件通过emit发送事件传递给父组件。

18、兄弟组件之间如何传值？

可以用过一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发$emit和监听$on来实现组件之间的通信和参数传递，类似window的全局自定义事件。类似与子传父，只不过是利用一个新的vue示例作为媒介，而不是当前vue示例(this)

19、jquery和vue的控制DOM元素的主要区别是什么？

jquery操作的是直接dom元素。vue操作的是dom元素对象。
vue.js优势是（视图-模型）双向绑定，简化了dom的操作（不用重写大量的html标签），提高dom的复用率（以最少代码实现更多的功能），倾向于数据读写，虽然看上去使用比较繁琐，但是利于后期的维护。
jquery优势是jquery语义化，容易理解，比较简单，可拓展的插件多。

总结:如果dom操作频繁，不需要动画效果，就使用vue.js。如果dom操作不频繁，但又需要复杂的动画效果，就使用jquery. vue.js比较适合于后台管理页面，jquery比较适合于前台用户交互页面。

20、vue2模版template的四种写法？

1.写在构造器里的：
2.写在(template)标签里
3.写在(script type=“x-template”)标签里

21、let和const的作用？

let不允许在相同作用域内，重复声明同一个变量。let声明的变量只在其所在代码块内有效
const是定义常量的,而且定义一次以后不能再进行更改， 否者会报错；
使用const定义的常量， 拥有let一样的特性（无声明提前， 有块状作用域， 重复声明）

22、如何理解JSON？

JSON是一种轻量级的数据交换格式,作用：通常用于服务端向页面传输数据。
JSON 是 一个 JS 对象，有 2 个 API
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

23、函数声明和函数表达式的区别（作用域）

1.以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的.
2.以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用.
3.以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而函数表达式可以在任何地方声明.

24、关于动态路由

不能传递参数的是静态路由，可以传递参数，但是其对应的路由数量是不确定的，叫动态路由
在参数名前面加上：,然后将参数写在路由的path内
这是无参数跳转

query和params两者都可以传递参数，区别是什么？
1.query 传参配置的是path，而params传参配置的是name，在params中配置path无效
2.query在路由配置不需要设置参数，而params必须设置
3.query传递的参数会显示在地址栏中
4.params传参刷新会无效，但是query会保存传递过来的值，刷新不变

25、vue是什么？跟JS有什么区别？

vue就是一个js库，并且无依赖别的js库，跟jquery差不多。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。
区别：在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或者js来添加各种特效功能，需要去选中每一个元素进行命令，这样太繁琐了
vue的好处：1.数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。2.组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。
一句话概括：用数据绑定的思想，vue可以简单写单个页面，也可以写一个大的前端系统，也可以做手机app的界面。

26、Vue-CLi是啥？

它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具

27、vue是怎么渲染的？

1.原有模板语法，挂载渲染：就是对使用Vue标签语法的hmtl进行渲染。
2.使用render属性，createElement函数直接渲染：原本无html，通过JavaScript 的完全编程的能力生成页面。
3.使用render属性，配合组件的template属性，createElement函数渲染
4.使用render属性，配合单文件组件，createElement函数渲染