vue的数据可视化 实战项目问题总结

原创 jiangbinwangyi 随笔 js 168阅读 2018-08-17 17:40:00 举报

vue2(vue-cli vue-router)+ view-ui3 + webpack +
echarts4(GL) + axios + less

不定期更新……

1:使用$set动态向data对象添加属性,并触发视图更新

2:iview的select、radio、chekbox等组件的on-change事件有个默认的event属性,可以帮助做更多的操作

3:vue-router使用history模式,编译发布后会出现刷新后404。
解决方式是不同的服务器环境需要不同的解决方式(Nginx,Apache,nodejs等)
以下官方解决方案本人尝试后无效……
vue-router官方解决方案:https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子

4: iview使用了 countUp 插件来做数据自增动画效果,很好用

1) 由于数据使用 axios 异步调用,在使用countUp的时候需要默认值
2) 异步调用也有可能会报“this.counter.update is not a function”错误,需要在countUp.vue中的watch里注释掉“this.counter.update(endVal)”
(iview3解决了此bug)

5: 子组件父组件的相互通信
【子组件A】利用$emit向全局广播自定义事件并传递参数
【父组件】用@监控该自定义事件,并接受传参。
【子组件B】再利用props对象接受父组件传参,并用watch监听,实时修改视图

当组件关系越来越复杂的时候,就该使用vuex了。
在使用vuex的时候,恰巧state是对象,如果mutation向state,动态添加属性的时候,是不会触发视图刷新的。
记得深拷贝一下

6:webpack配置相对路径,修改config下的index.js
build.assetsPublicPath: './'
(https://blog.csdn.net/wxl1555/article/details/81105204)

该文件还可以配置预览时(dev)的主机、端口、路径等。
主机配置成内网ip时,局网内也可以访问。

7:iview设置网页标题方式也是使用router.beforeEach方法

8:v-for循环动态生成图片src,图片路径错误。
vue-cli生成的webpack配置中针对图片的配置是小于10000b就生成base64位。
但是动态引用后,无法被url-loader解析到。可以改成使用require引用,继续走url-loader解析。

9:如果需要使用iview主题订制

https://www.iviewui.com/docs/guide/theme

记得把less调成3.0版本以下,否则会报错

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复