前端知识点也可以当做面试题（含vue）

一、 webpack3.x 打包工具

三大组成结构、 package.json 、 webpack.config.js 、 serve.js

1 、 Package.json ：下载目录需要的依赖包

2 、 Webpack.config.js ：是配置 webpack 的打包文件的配置由下四个部分组成

（ 1 ） entry ：入口

（ 2 ） Ouput ：出口

（ 3 ） Module ：这个里面处理各种文件的 loader

（ 4 ） Plugins ： webpack 用的的插件

3 、 serve.js 在自己本地起一个服务器

4 、处理图片用 url-loader 可以把用到的图片打包到指定目录，单纯只对 css 里图片

如要概括 html’ 里的图片，需要下载一个 loader html-withimg-loader 、再配置

Serve.js ：是利用 webpack 自带的服务器在自己电脑上起一个服务

（1）html5 、 css3 新增标签以及属 border-radius 圆角、 animation 动画特效

二、ajax 方法参数性

（2） 、 html5 ： header 、 nav 、 article 、 footer 语义化标签、 audio 音频标签、 canvas 基于 script 的画布

三、 、 css3 ：伪类悬着器、用于插雪碧图或者箭头等需求。 Background ： rgba 背景色 透明度、 transform 、 transition 过度效果、

（1） 、 url 要求为 string 类型参数

（2） 、要求为 string 类型，请求方式 post 或者 get 、 put 和 delet 只有部分浏览器支持

（3） 、 timeout 求情超时时间（毫秒）

（4） 、 async 要求 boolean 类型设置为 true 时候所有请求都会是异步、反之同步为 false 同步会锁定浏览器、用户其他操作必须等待请求完成才可以执行

（5）Cache 默认为 true ，参数类型 boolean 。设置为 false 时候将不会从缓存中加载请 求信息

（6）DataType 要求类型为 string 的参数，预期服务器返回的数据类型，可以用以下类 型

1、xml 返回 xml 文档

2、Html 返回纯 html 信息

3、Json 返回 json 数据类型

4、Jsonp 使用 sonp 形式调用函数

5、Text 返回纯文本字符串

四、ajax 跨域问题解决方案 同源策略

（1） 、后端返回 jsonp 数据格式、缺点是只支持 get 请求

（2） 、 CORS 解决，也是由后端解决

（3） 、代理请求方式，常用的是用 nodeJs 可以代理、 ajax 请求的是本地接口、然后由 本地接口向实地接口请求数据，再返回给前端

五、闭包、

声明一个函数中的函数叫闭包

可以避免使用全局变量，防止全局变量污染

会造成内存泄漏（有一块内存空间被长期占用而得不到释放）

六、Vue-Router

（1）组件之间传参数

父子组件：子组件通过 props 方式接收数据

子传父： $emit 方式传递参数

兄弟之间传值： eventBus 创建一个事件中心，相当于中转站可以传递事件和接收事 件项目比较小的时候用这个比较合适

（2） 路由 router

有组件三种： router-link 、 router-view 、 keep-alive

Active-class 是 router-link 的终极属性，用来做选中样式切换、当 router-link 标 签被点击时候会应用这个样式

动态路由：

创建主要是用 path 属性过程中使用动态路由参数参数值被设置到 this.$route.params 下，通过这个属性可以获取到动态参数

导航钩子：

全局前置守卫：

to 和 form 都是路由对象， to 代表要进入的目标。 From 代表当前正要离 开的路由。 Next 是必须要调用的方法

Const router = new VueRouter({})

Router.beforeEach((to,from,next) = {

})

全局后置钩子：

后置钩子并没有 next 函数，也不会改变导航本身

路由独享钩子： beforEnter

（3）$router 和 $route 的区别

Router 是全局路由对象是 VueRouter 的实例，包含了路由跳转方法、钩子函数。

Route 路由信息对象、跳转的路由对象，每个路由都会有 route 对象

（4）vue-router 响应路由参数变化

用 watch 检测

watch: {

$route(to, from){

console.log(to.path)

// 对路由变化做出响应

}

}

组件内导航钩子函数

（5）vue-router 传参

第一种 params ：只能使用 name ，不能使用 path 、参数不会显示在路径上，浏览器 强制刷新参数会被清空

第二种 query ：参数会显示在路径上，刷新不会被清空。 Name 可以使用 path 属性

（6）vue-router 的两种模式

第一种 hash 模式：原理是 onhashchage 事件，可以在 window 对象上监听这个事件

第二种 history 模式：利用的 h5 中 History Interface 新增的 pushState() 和 replaceState() 方法。需要后台支持，如果刷新时，服务器没有响应响应的资源，会刷出 404 。

七、vuex 的五个核心

（1）State ：基本数据

（2）Getters ：从基本数据派生的数据

（3）Mutations ：提交更改数据的方式，同步！

（4）Actions ：像一个装饰器，里面包裹 mutations ，使之前可以异步

（5）Modules ：模块化 vuex

八、Axios

（1）axios 是一个基本 es6 中的 promise 的异步 ajax 请求库，可以使用在浏览器和 node 中支持请求。响应拦截、请求取消、转换请求数据和响应数据、批量发送多个请求。 客户端支持防御 XSRF

有想了解更多的小伙伴可以去链接看一下，应该对你们能够有所帮助。