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

Vue+Iview+Less+Echarts小系统制作心得与避坑指南

在我近期的学习实践中，我运用Vue、Iview、Less和Echarts构建了一个小系统，这次经历让我收获颇丰，也遇到了一些挑战。在此，我想分享我的学习心得和避坑指南，希望能给正在相关技术的小伙伴们一些参考。

一、Vue与Iview的交融之美

Vue作为前端框架的佼佼者，其灵活性和便捷性为开发提供了极大的便利。配合Iview这一高质量的Vue UI组件库，二者的结合使得开发过程如虎添翼。在构建界面的过程中，Iview的丰富组件和简洁API大大提升了开发效率和代码质量。Vue的动态组件和指令系统让我在实现复杂交互时更加得心应手。

二、Less的魔力

Less作为CSS预处理器，使得样式开发更加灵活、可维护。我在项目中通过Less实现了样式的模块化、组件化，大大提高了代码复用率。Less的变量、混入（mixins）、嵌套等特性使得样式开发更加高效，也使得代码更加简洁、美观。

三、Echarts的图表魅力

Echarts为我提供了丰富的图表类型和灵活的图表定制能力。在数据可视化方面，Echarts的表现非常出色。通过Echarts，我轻松实现了各种复杂的数据可视化需求，使得数据更加直观、生动。Echarts的交互性和动态效果也大大提升了用户体验。

四、制作过程中的挑战与解决方案

在制作过程中，我也遇到了一些挑战。例如，对于Vue的生命周期钩子理解不够深入，导致在某些情况下出现了性能问题。针对这些问题，我通过深入学习Vue的生命周期机制，优化代码结构，最终解决了问题。我还遇到了一些关于Iview组件的使用问题，通过查阅官方文档和社区资料，我也成功解决了这些问题。

刚开始接触Vue的我，在组件数据定义方面跌了不少坑，尤其是某个页面。数据的回选过程中，我曾误操作重定义了已设定好的数据，导致整个数据体系混乱不堪。尤其是storeDetail.vue文件的第14至321行，这些数据庞大且有必要进行裁剪优化。我利用js进行计算补全数据，有效减轻了后台的负担，虽然这增加了前端渲染数据的任务量，但用户体验得到了显著提升。

关于父子组件的数据通讯问题，我在编写Modal时遇到了挑战。父子组件间共享的数据在关闭时出现了冲突，即子组件改变了父组件传递的props数据导致报错。我尝试了两个解决方案：一是使用vuex共享Modal的开关状态；另一个更好的方法是创建mixins文件夹，并在其中进行操作。我选择在mixins的js文件中通过emit触发父组件的on-cancel事件，这样多个子组件就可以共用Modal的代码了。

在组件命名方面，我遵循了特定的命名规则。文件夹采用大驼峰命名法，如Store、Shop等。对于文件和变量的命名则采用小驼峰命名法，例如storeDetail.vue、parcelList.vue等。

我积极采用了flex布局。flex作为2018年的主流布局方式，其兼容性已经无需担忧。同时我也注意到了grid布局，它可能也会成为未来的流行趋势。

为了在低带宽环境下提供更好的用户体验，我使用了懒加载技术。在参考iview admin代码的基础上，我将懒加载的用法统一为以下格式：

```javascript

path:"/parcel-list",

meta:{

group:"parcel",

item:"parcel-list"

},

component: resolve => import('@/pages/Parcel/parcelList')

```

在处理侧边栏刷新问题时，我注意到组件绑定了active-name和open-names两个变量。我在路由设置时添加了meta信息，通过this.$route.meta.group和this.$route.meta.item与active-name和open-names进行匹配，实现了无刷新操作。

在使用Echarts与Vue结合时，我遇到了一个挑战。在echarts实例化时，由于组件的id需要多次被同一组件调用，因此必须设为变量。这是因为echarts官网文档要求实例化的div的id具有唯一性。为了避免重复调用和查阅文档多次的问题，我对echarts的数据进行了封装处理。

为了提高效率和符合MVVM思想，我积极编写公共组件。这些公共组件可以在调用时直接使用数据渲染，大大减少了代码量。通过这种方式，框架的本质——减少代码得到了充分体现。通过这样的实践，我不断学习和成长，为项目开发贡献自己的力量。