1. 引入iview组件库的项目打包后，图标样式缺失的问题：
这个问题可能是vue-cli脚手架配置问题
在build / webpack.prod.conf.js中
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: false
})
},
把extract：true 改为 fasle就可以了
复制代码
2. Vue路由
2.1路由懒加载
2.2相关差异
(1)this.router的区别：
$route代表当前正在用于跳转的路由对象，可以调用name,params,query,path等属性
$router代表全局路由实例，任何页面都可以调用其go(),replace(),push()方法
（2）this.router.replace（）、this.$router.go（）的区别：
this.$router.push（）跳转到指定URL，并向history栈中添加新的记录，点击后退会返回上一个页面；
this.$router.replace()跳转到指定URL，并替换history栈中最后一条记录，点击后退会返回上上级页面；
this.$router.go()类似于 window.history.go(n),用于向前或向后跳转n级页面
(3) vue-router中传参的区别：
1.传参可以使用params和query两种方式。
2.使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。
3.使用query传参使用path来引入路由。
4.params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。5. 二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。
如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)
(4) vue-router页面跳转时，清除定时器：
在页面生命周期beforeDestroy(组件销毁前),清除定时器：
beforeDestroy(){
clearInterval(this.timeSet);
},
3. replace(new RegExp）的使用
4. vue中v-html标签可以将字符串转换为html标签格式
5. 四种常见的post数据提交方式：
(1).application/json：
这种方式可以方便的提交复杂的结构化数据，作为请求头用来告诉服务端消息主体是序列化后的JSON字符串，JSON格式支持比键值对复杂得多的结构化数据
JSON.parse()和JSON.stringify()的使用：
**JSON.parse()【从一个字符串中解析出json对象】<br>
JSON.stringify()【从一个对象中解析出字符串】**<br>
复制代码
sessionStorage存储对象，读取时变为【object object】的解决办法：
存时：
sessionStorage.setItem('peopleInfo',JSON.stringify(this.peopleInfo))
取时：
this.peopleInfo = JSON.parse(sessionStorage.getItem('peopleInfo'))
(2).application/x-www-form-urlencoded:
最常见的POST提交数据的方式，浏览器原生
表单如果不额外设置enctype属性，那么最终就会以application/x-www-form-urlencoded方式提交数据，提交的数据按照键值对key1=val1&key2=val2的方式进行编码，key和val都进行了url转码:a:12b:14
(3).text/xml
(4).multipart/form-data
** 6. vue中使用axios请求数据，封装时使用promise
** 获取axios请求到的数据时，能get到数据，但不能传值报错：TypeError: Cannot set property 'array' of undefined at eval (list.vue?51fc:19) 原因是使用在.then（）里使用function会改变this指向，把.then里的function改为es6箭头函数写法就可以解决问题
7.
8. vue父子组件交互：
9. 自适应解决方案：
淘宝解决方案：
<script>
!function(e,t){
var n=t.documentElement, d=e.devicePixelRatio||1;
function i(){
var e=n.clientWidth/38.4; //设计稿/100,根节点HTML font-size设为100px
n.style.fontSize=e+"px"}
if(function e(){
t.body?t.body.style.fontSize="16px":
t.addEventListener("DOMContentLoaded",e)}(),i(),
e.addEventListener("resize",i),
e.addEventListener("pageshow",
function(e){e.persisted&&i()}),2<=d)
{var o=t.createElement("body"),
a=t.createElement("div");
a.style.border=".5px solid transparent",o.appendChild(a),n.appendChild(o), 1===a.offsetHeight&&n.classList.add("hairlines"),n.removeChild(o)
}}(window,document) </script>
复制代码
lib-flexible适配大屏方案：
cloud.tencent.com/developer/a…
lib-flexible搭配postcss-px2rem-exclude适配移动端并且引入第三方Ui库不受影响方案：
安装完lib-flexible和postcss-px2rem-exclude后，找到
配置代码：
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
即可解决引入Vant时，vant组件样式缩小的问题
10.JS实现显示当前时间：
<div id="time"></div>
function showTime(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var day = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var showTime = year+'-'+month+'-'+day+' '+hour+((minute<10)?':0':':')+minute+((second<10)?':0':':')+second;
document.getElementById('time').innerHTML = showTime; }
window.onload = function(){
showTime() }
// setInterval("showTime()",1000); //实时更新
复制代码
10.1判断当前时间是否过期：
应用场景：后台传的时间与当前时间做对比，以便相应操作
//判断当前报名时间是否过期
let endTime = this.infoList.act_apply_enddate
let d = new Date(Date.parse(endTime.replace(/-/g,"/")))
let curTime = new Date()
if(d<curTime)
{
this.status = '已结束'
}
11.前台js实现上传头像且预览：
12.vue实现监听Input搜索框模糊搜索：
1.v-model双向绑定keyword，监听用户输入字符
2.初始化keyword
3.计算属性监听input框
13.webpack打包优化：
如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。
这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式，例如import方式等。
例子：
14.轮询、长轮询、长连接、Websocket
15.localStorage跨域存储方案
localStroage存储受限于同源策略，只能在同一浏览器、相同端口域名下存储。如果想要实现不同页面间共享，就需要做跨域存储的处理。
应用场景：
本地的Vue项目与配置页面html想公用一个localStroage:
//html配置页（vscode使用Live server插件可搭建本地网页服务）
//vue项目展示页
解决方案：采用ifram+postMessage相结合的方法：
postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信，可以实现跨文本档、多窗口、跨域消息传递。接受两个参数：
- data：要传递的数据，HTML5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器支持任意类型的参数，部分浏览器只能处理字符串参数，所以在传递参数时需要使用JSON.stringify()方法对对象参数序列化。
- origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，只是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然也可以将参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
代码示例：
1、在html中嵌入iframe标签，指定vue项目页面的url/
<div id="app">
<div class="page1" style="margin-top: -100px;">
<iframe src="http://192.168.0.149:8080/#/index2" frameborder="0"></iframe>
2、在create()钩子函数中使用postMessage传递数据myLayout
setTimeout(() => {
window.frames[0].postMessage(myLayout, '*')
window.addEventListener('message', function (e) {
let data = e.data
console.log(data)
})
}, 1000)
3、在vue项目页面中获取传递的数据，并存在缓存中
window.addEventListener('message',function(e){
if (e.source != window.parent) {
return;
}
let layout = e.data
console.log(layout)
localStorage.setItem("layout", JSON.stringify(layout));
})
16.判断input 多选框 的选中状态：
changeCheck(e, index) {
console.log(e)
console.log(event.target.checked)//选中为true，取消选中为false
18.控制搜索下拉框在点击其他地方时隐藏：
hideSearch() {
let x = document.getElementById("searchShow");
let y = document.getElementById("search");
if (x && y) {
if (!x.contains(event.target) && !y.contains(event.target)) {
this.showFocus = false;
}
}
}
}
在父div中设置点击事件hideSearch，在搜索框和下拉框div中绑定searchShow和search；
