项目结构与规范说明
一、目录结构说明
src
assets 静态资源(图片、字体等)
common 项目全局公共函数封装
components 全部组件
common 通用组件,不带有任何业务数据,只带有通用样式或特定样式以及事件;以文件夹的形式隔开,如果存在资源则建立子目录存放
modules 业务组件,带有通用业务数据;
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文件规范
// v-on => @
// v-bind => :