项目搭建:
1.项目公共组件放在src/components。
2.由于代码结构复杂拆分出去的,业务组件放在子目录components。
3.vue文件里面把数据处理代码拆分出去,写好的文件css也独立拆分出去(细小的组件一行两行的未拆分)。使得vue文件
组件划分:
View层减重的基础,将可共用的视图组件剥离出去,改为消息机制进行通信,甚至直接剥离出包含视图和业务代码的业务逻辑组件,都可以有效地拆分View层,降低代码的复杂度。
Api/ axios的统一放置
/api_user 接口地址编写
/env 切换接口地址
/index axios配置
Directive/ 公共自定义指令,没必要全局挂载的就别全局挂载。
Assets/ 静态文件资源 (项目为单位的静态都放这)
/font 本地字体
/image 图片
Style/ 样式文件(scss,less,css)
Components/ 公共组件
Vender/ 第三方组件本地化
Utils/ 工具类:放置一些公用的方法类,以项目为单位。
(一个类方法越少越好,特殊的最好一个类一个方法,以功能命名)
Filter/ 过滤器,放置过滤器和一些数据格式过滤
/index eg:时间格式化,把格式化归到了过滤里边
/htmlFilter 全局过滤器
Mixin/ 混入组件的代码,数量不多直接以功能命名。动态数据变化的放在这里面。
staticData/ 静态数据,多个js文件以数据功能命名。
Router/ 路由根据模块拆分,模块单位,油田、储气库…
Store/ vuex,仅仅放置一些全局状态,谨慎用。
Js/ 业务数据处理层
js/common 放置业务组件的公共方法,以单个方法命名,减少文件占用。
…
数据处理层按照业务剥离(js的剥离):在对应的js/ 中,对应页面有相应的js。
Js细分标准,多数文件用到的提出到common,单个组件用到的,提出到文件顶端。公共data提出到,staticData/
方法优化。规范返回值,引用数据类型的返回。