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 相关文章推荐
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
Node.js实现数据推送
Apr 14 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
微信小程序调用后台service教程详解
Nov 06 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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 数组的指针操作实现代码
2011/02/08 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
javascript实现微信分享
2014/12/23 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python中的is和id用法分析
2015/01/26 Python
python使用zip将list转为json的方法
2018/12/31 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
pycharm快捷键汇总
2020/02/14 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
哈弗商学院毕业生求职信
2014/02/26 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
给上级领导的感谢信
2015/01/22 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle