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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
JS正则表达式验证中文字符
May 08 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
JS中作用域以及变量范围分析
Jul 18 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处理json格式数据经典案例总结
2016/05/19 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
javascript实现点击小图显示大图
2020/11/29 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
python海龟绘图实例教程
2014/07/24 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Python新手学习raise用法
2020/06/03 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
应用化学专业职业生涯规划书
2013/12/31 职场文书
读书小明星事迹材料
2014/05/03 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
政府信息公开实施方案
2014/05/09 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
业务员岗位职责范本
2015/04/03 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书