vue项目搭建目录以及标准(慢慢摸索)

vue项目搭建目录以及标准(慢慢摸索)_第1张图片
项目搭建:
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/

方法优化。规范返回值,引用数据类型的返回。

你可能感兴趣的:(项目搭建,vue.js)