项目采用的是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上的二级菜单
三层目录下才是真正的业务逻辑代码,包括相应的组件,服务,以及具体路由信息
如果菜单功能比较复杂,还可以继续划分下层目录,根据实际情况需要进行。