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

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

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

Vue2在实际项目中的应用——项目目录结构概览_第1张图片

其中:

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

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

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

i18n目录是国际化

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

mixins目录是vue的mixin

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

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

store目录是vuex的一些组件

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

scss是通用样式目录

tutorials是js doc的目录

 

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

Vue2在实际项目中的应用——项目目录结构概览_第2张图片

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

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

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

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

 

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

Vue2在实际项目中的应用——项目目录结构概览_第3张图片

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

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

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

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

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

 

你可能感兴趣的:(Webpack,Vue2,ES6)