用vue+iview+less+echarts做的小系统,总结

这是之前写的一个项目,在这里面踩了很多坑(对我这种新手来说),在这里分享出来

这是在线运行地址(阿里云学生价9.9买到的,能放些图片和打包后的网页还是挺良心的),代码地址在这里,里面只有前端V1部分,争取下个月用node+MDB做完后台

前端定义的数据规范化

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

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

父子组件数据通讯问题

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

在这里有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')
  }

侧边栏刷新问题

在这里要注意到组件给了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" style="height: 500px"></div>

 let myChart=this.$echarts.init(document.getElementById(this.chart.id))

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

多写公用组件

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