项目结构与规范说明 一、目录结构说明 src assets 静态资源(图片、字体等) common 项目全局公共函数封装 components 全部组件 common 通用组件,不带有任何业务数据,只带有通用样式或特定样式以及事件;以文件夹的形式隔开,如果存在资源则建立子目录存放 modules 业务组件,带有通用业务数据; config 全局配置 directives 全局指令 按文件名划分 filters 全局筛选指令 pages 页面容器 login 路由为/home的页面,该页面如果涉及子页面,则创建children目录进行存放,多级递归。注意这里多级时路由配置也需要多级配置 children child.vue index.vue plugins js第三方插件 router 路由配置 map 各个页面对应的路由配置,注意:这里是按页面来配置 server 前端领域业务封装,文件名按领域来区分;测试用例针对领域来编写流程 testData 按领域来存放测试数据 store vuex 模块 modules 细分各个模块 index vuex入口 style 全局样式 common.less 全局公共样式 root.less 全局less变量 tests e2e 端到端测试 unit 单元测试 vue.config.js 工程基本配置文件-端口、编译输出目录... 三、js规范 变量 1.当前作用域顶端定义 2.var禁用 在块级作用域下使用let 3.在全局作用域下,函数及变量使用const定义 4.字符串统一使用单引号,标签或者属性的值采用双引号 函数 1.that=this; 函数内部存在嵌套函数时,必须在最外层定义this指向 2.内部私有方法写在return之后 3.判断是否相等用全等号 类 1.定义顺序:变量、公开方法、私有方法 模块 1.export default 写到最底部 2.export 变量写在一起靠底部位置 命名 1.变量、函数、vue组件名称 小写开头 驼峰规则 2.私有加前缀(下划线) 3.类命名 大写开始 驼峰规则 4.资源文件全部用小写命名(包括文件夹),如backbtn.png、 province_city.json 四、css规范 每个style标签必去加上scoped 样式规则: .classname{ //定位规则 //盒子属性 //其它 } classname:命名规则 小写;多个单词-(中划线)分格 层级样式减少标签直接使用方式; 层级定义样式规则: .父级 .父级-子级 .父级-子级-子级 class相隔必须用-(中划线) id相隔必须用_(下划线) 样式封装块,重复样式定义继承处理 .commonclassname .classname { //定位规则 //盒子属性 //其它 &:伪类 { } // 嵌套层级 .classname { } .classname { } } 五、路由规范 根据页面来制定路由区域 六、Vue文件规范