- 项目组织结构
- ajax数据请求的封装和api接口的模块化管理
- 第三方库按需加载
- 利用less的深度选择器优雅覆盖当前页面UI库组件的样式
- webpack实时打包进度
- vue组件中选项的顺序
- 路由的懒加载
- 路由模块拆分化管理
项目组织结构
清晰的项目结构能让别人开发进来更容易理解,当然,每个人都有一定的代码风格习惯。但基于vue开发框架的项目,vue-cli脚手架搭建的项目组织结构大同小异。同时,预想到后面的需求变更及功能增加进展得更有效率,下面截图是我觉得比较好的项目组织结构:
这个截图只是针对个人觉得比较通用的vue工程结构,不过这个结构要根据具体的项目情况调整,不必为了模块化而模块化。模块化的优势就是体现在项目业务比较复杂的情况,如果项目业务逻辑并不复杂,可以适当的删减部分模块或文件。
相关说明:
assets: 存放图片、UI设计的图标文件
componets:自研的业务型及通用型组件
router:项目的路由管理模块
store:基于vuex的状态管理容器,api存放各模块的数据请求,modules存放将store分割成模块(module),按官网的说法,每个模块应该拥有自己的 state、mutati