Vue2在实际项目中的应用——项目目录结构概览

项目采用的是Vue2+Webpack2，分成了几个项目：一个通用的library项目，里面是一些公用的组件；一个是平台项目，会build出来三个端，每个端不同角色的用户会登陆各自的平台。

下面先看一下library项目结构：

其中：

components目录是通用的组件封装，比如表格之类的

directives目录是一些指令，比如最大化对话框等

filters目录是过滤器，比如时间格式化

i18n目录是国际化

interceptors目录是拦截器，比如http请求的错误处理，vue-router的一些hook

mixins目录是vue的mixin

plugins是管理平台模板的一些jquery插件

services目录是通用的服务封装，比如oss请求，消息服务请求

store目录是vuex的一些组件

utils目录是一些通用的函数封装

scss是通用样式目录

tutorials是js doc的目录

 

下面看一下platform的目录结构：

相同的就不在说了，平台项目里也会有自己一些独特的组件，拦截器等，所以也会有对应的目录

routes目录是不同端的路由配置

platforms目录是不同端的业务代码

main-xxx.js对应不用端的build入口文件

 

下面具体看一下platforms目录结构：

第一层目录是几个端，比如运营端和其他端等。还有一个包含各端通用业务逻辑功能的common目录

第二层目录是UI上的一级菜单

第三层目录是UI上的二级菜单

三层目录下才是真正的业务逻辑代码，包括相应的组件，服务，以及具体路由信息

如果菜单功能比较复杂，还可以继续划分下层目录，根据实际情况需要进行。