vue项目中常见的坑

发表于 | 分类于 | 阅读次数:

本地运行跨域问题

通过webpack-dev-server的proxy来解决api接口请求跨域的问题，在dev的index.js文件中，设置proxy

1
2
3
4
5
6
7
8
9
proxyTable: {
  '/api': {
    target: 'http://baidu.com/',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  }
},

在axios的中设置

1
axios.defaults.baseURL = "/api";

vue

操作DOM

在created()钩子函数执行的时候进行的DOM操作，发现并未进行任何渲染，在查看Vue官方文档中，发现可以在Vue生命周期的created()钩子函数中通过在Vue.nextTick()的回调函数中进行的DOM操作，或者在mounted钩子函数直接进行DOM操作

element ui

Table

在element ui的table中，如果想去修改某一行的数据，如果直接将它复制给data对象里的一个属性，当修改某个字段时，会发现table里对应某行字段的数据也会发生改变，产生的原因时一个objec引用类型共享一个内存区域的，所以我们就不能直接连等复制，需要重新指向一个新的引用

1
2
3
4
5
6
7
8
9
10
11
//赋值对象是一个object
this.objData=Object.assign({}, row)
或
this.objData={...row}

//赋值对象是一个array
newArray = oldArray.slice()
或
newArray = oldArray.concat()
或
newArray = [...oldArray]

el-table-column中格式化数据，可以通过formatter属性来绑定一个方法去写格式化数据，或者vue的计算属性computed

在每个el-table-column中通过设置min-width来适应不同大小的屏幕

input

在el-input中通过添加.native 修饰符来触发input的原生事件

1
<el-input @click.native="handlenClick">Click Me</el-input>
修改element样式

可以通过新建一个样式文件，在mian.js里引入

mint ui

Message box

在用户的反馈中，ios8.1.2的微信浏览器中会出现提示框出现偏离的状况，修复问题中发现.mint-msgbox的样式中transform: translate3d(-50%,-50%,0);没有起作用，通过引入全局样式

1
2
3
4
5
6
7
.mint-msgbox{
  max-width: 84%;
  top: 35%;
  left: 8%;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
微信JSSDK签名出错

在vue-router的对象实例中设置了mode: ‘history’，会在使用this.$router.push跳转需要调用微信JSSDK的页面中，会签名出错，解决的方式有

1
2
3
4
//方案一
通过location.href来跳转需要调用微信JSSDK的页面
//方案二
vue-router使用hash模式
在真机上进行调试

通过在main.js引入vConsole.js来查看api接口请求的数据