vue 图片被背景色覆盖_vue项目的一些最佳实践提炼和经验总结

• 项目组织结构
• ajax数据请求的封装和api接口的模块化管理
• 第三方库按需加载
• 利用less的深度选择器优雅覆盖当前页面UI库组件的样式
• webpack实时打包进度
• vue组件中选项的顺序
• 路由的懒加载
• 路由模块拆分化管理

项目组织结构

清晰的项目结构能让别人开发进来更容易理解，当然，每个人都有一定的代码风格习惯。但基于vue开发框架的项目，vue-cli脚手架搭建的项目组织结构大同小异。同时，预想到后面的需求变更及功能增加进展得更有效率，下面截图是我觉得比较好的项目组织结构：

这个截图只是针对个人觉得比较通用的vue工程结构，不过这个结构要根据具体的项目情况调整，不必为了模块化而模块化。模块化的优势就是体现在项目业务比较复杂的情况，如果项目业务逻辑并不复杂，可以适当的删减部分模块或文件。

相关说明：

assets: 存放图片、UI设计的图标文件

componets：自研的业务型及通用型组件

router：项目的路由管理模块

store：基于vuex的状态管理容器，api存放各模块的数据请求，modules存放将store分割成模块(module)，按官网的说法，每个模块应该拥有自己的 state、mutati