vue+iview+less+echarts实战项目总结


Posted in Javascript onFebruary 22, 2018

首先我们先分享一下源码:https://github.com/kunfan96/vue-admin

对于我这种刚开始用Vue做项目的菜鸟来说在组件数据定义方面犯了很多错误,尤其是在这个页面

vue+iview+less+echarts实战项目总结

在进行数据回选的时候自己重定义已经定好的数据,导致数据非常杂乱无章,具体在storeDetail.vue的14--321行,感觉这么多数据非常有必要的进行裁剪,用js进行运算把数据补充完整,这里相对把后台的任务减轻了很多,只是额外增加前端渲染数据的量

父子组件数据通讯问题

刚开始写Modal的时候对于Modal的开关modal父子组件共享的数据,然后在关闭的时候子组件改变了父组件传递的数据会报错,也就是props的值

vue+iview+less+echarts实战项目总结

在这里有2个解决方案,一个是用vuex共享Modal的开关(写起来有点绕,代码也不简洁),另外一个最好的方法是建立一个mixins文件夹,在mixins的js进行操作,关键代码--->mixins/closeModal.js--->this.$emit('on-cancel',false),子组件通过emit使父组件发生on-cancel,响应一个事件,这样写可以让其他多个子组件使用到Modal共用代码

组件命名方式

在这里我自己定义了文件夹采用了大驼峰命名法,例如文件夹Store,Shop,对于文件以及变量的命名采用小驼峰命名法,如果storeDetail.vue,parcelList.vue

多用flex

2018年flex将会是主流,兼容性问题也没必要理睬,还有多注意grind布局,可能也有流行了

多用懒加载

使用懒加载方便在低带宽时候能够带来更好的用户体验,在参考iview admin代码我把懒加载的用法统一为

{
 path:"/parcel-list",
 meta:{
  group:"parcel",
  item:"parcel-list"
 },
 component: resolve =>import('@/pages/Parcel/parcelList')
 }

侧边栏刷新问题

vue+iview+less+echarts实战项目总结

在这里要注意到组件给了2个绑定的变量active-name,open-names,这里我们在路由设置的时候添加

meta:{
  group:"",
  item:""
 }

通过this.$route.meta.group,this.$route.meta.item就可以与active-name,open-names进行匹配实现无刷新操作

记得多npm run build

iview这个组件有点问题,有时候就是修改Modal的样式我明明在style(不带scoped)标签修改之后npm run dev样式修改成功,可是build之后样式就又重新恢复,后来把样式放在静态文件夹中才可以修改成功,还有就是表格居中build之后之后不能居中,总之,多build问题早点发现早点解决是好事(切莫佛系~~~)

Echarts在VUE的使用

在这里有个坑,在echarts实例化的时候在chart.vue有段代码

<div :id="chart.id"></div>
 let myChart=this.$echarts.init(document.getElementById(this.chart.id))

在这里注意到有个id,我在这里之所以这样做,把组件的id设为变量主要是echarts官网文档写到在网页中echarts实例化的div的id具有唯一性,由于我这个chars组件需要多次被被同一组件调用多次所以是只能将id设为一个变量(这个真的坑,调了很多次上官方文档看了好几次才知道...).另外最好把把echars的数据封装一遍

多写公用组件

框架这种东西本质就是减少代码,公用组件写好了调用的时候使用数据渲染就可以了,这样就能大大减少代码量,也符合MVVM的思想

Javascript 相关文章推荐
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
在vscode中统一vue编码风格的方法
Feb 22 #Javascript
vue webpack打包优化操作技巧
Feb 22 #Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 #Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 #Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 #Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 #Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 #Javascript
You might like
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
javascript数组排序汇总
2015/07/07 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
python操作redis方法总结
2018/06/06 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python实现定时发送qq消息
2019/01/18 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Python中turtle库的使用实例
2019/09/09 Python
详解python中eval函数的作用
2019/10/22 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
办公自动化专业大学生职业规划书
2014/03/06 职场文书
小学二年级评语
2014/04/21 职场文书
大学迎新标语
2014/06/26 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python