命名规范
文件目录规范
├── node_modules # npm包依赖目录
├── public # 公共资源目录
│ ├── favicon.ico # 网站标签图标
│ └── index.html # 项目页面入口
├── src
│ ├── api `*` # 接口层目录
│ ├── assets # 项目资源目录
│ │ └── typhoon `*` # 按业务模块存放资源
│ ├── components # 共用组件目录
│ ├── plugins `*` # 插件目录
│ ├── config `*` # 文件配置文件存放路径
│ ├── store # vuex相关模块目录
│ │ ├── modules `*` # 模块文件夹
│ │ │ └── typhoon-map.js #独立的子模块
│ │ └── index.js `*` # store模块主入口
│ ├── style `*` # 公共样式目录
│ ├── utils `*` # 基础工具类目录
│ ├── views `*、L` # 业务模块目录
│ │ ├── typhoon `*` # 台风模块，复杂的模块可以单独一个文件夹
│ │ │ ├── index.js
│ │ │ ├── typhoon-path.vue
│ │ │ └── typhoon-map.vue
│ │ └── base-login.vue `*` # 登录模块，简单的模块可独立一个vue文件
│ ├── App.vue # 开发环境vue主入口
│ ├── main.js # 开发环境js主入口
│ ├── router.js # 路由主入口
│ └── store.js # vuex主入口
├── CHANGELOG.md `*` # 更新日志
├── index.js `*` # npm包主入口
├── README.md # 文档描述
├── babel.config.js # babel配置文件
├── package-lock.json # npm依赖描述文件
└── package.json # npm包描述文件
变量命名规范
1. 驼峰式代码规范：一般是功能+名词+修饰词，如：addUserDetail AddUserInfo
2. 常量命名一般用大写字母加下划线，如：
const MAX_NUMBER = 100
const URL = 'https://'
3. 短横杠命名（kebab-case）规范: 如:add-user-item
4. 项目中尽可能规避单点store使用（指的是没有多处公用状态），父子组件用组件通讯，多路由共用数据或通讯推荐使用store进行管理
5. 组件中引用文件尽量减少引用到文件级别（如：import(xx.js)改为import(xx)）
6. localstorage命名尽量用（项目名-目录-名称）
组件命名规范
- .vue 文件命名
- my-component.vue或者Content.vue（只有一个单词的组件名称用大驼峰命名）
- vue组件引用
- import MyComponent from './my-component.vue'
- import MyUtil from './my-util.js'
- vue内部组件注册
- components: { MyComponent }
- Vue.components('my-component', MyComponent)
- template标签引用
- <my-component></my-component>
- render中使用<my-component />
- props参数定义
- data:{type:Number,default:1}尽量定义类型和默认值
样式命名规范
- 样式均采用短横杠命名+下划线形式（父容器采用短横杠命名），项目基本使用scss语法构建，在.vue文件下独立的组件均用scoped隔开，所有名称禁止用aa，bb之类的，尽量语义化
// 页面元素
<div class="typhoon-title">20190101 利奇马<span class="typhoon-title__close">点此关闭</span></div>
// 样式元素
<style lang="scss" scoped></style>
组件内methods方法命名规范
- 组件内方法均采用驼峰式命名，有与页面进行交互的需要用交互方式开头区分开，如
function addUserDetail(){} // 表示程序主动添加用户详情操作
function tapAddUserDetail(){} // 表示用户点击添加用户详情操作
- 方法尽量带有备注，如需传参、返回数据提供调用需说明传参类型和返回类型，如：
// 项目初始化，主要用在xxx
function init(){
xxx
}
/*
* @param id 用于获取数据的id: 1000
* @returns {Object} 返回带用户信息的对象{age,name}
*/
function getUserConfig(id){
xxx
return {age:1,name:"xx"}
}
vuex内部构造命名规范
- state: userInfo
- getters: getUserInfo()
- mutations: someMutation()
- actions: incrementAsync()
自定义开放功能配置(由于目前存在下划线和驼峰混用，故尚未定下规范)
- 该模块主要是配合运维配置不同的系统功能项目，常常开放json文件或在index.html文件中开放配置
- 对象名遵循大驼峰式命名规则，如配置出口对象形式配置，尽可能减少对象嵌套层级，
var UserConfig = {
userInfo:{
age:1,
imgUrl:"https://",
nameConfig:{
name:"张三",
enName:"zs"
}
}
}
##常用规范
html规范
1. 语义化标签
2. 使用表达式
在模版中使用表达式，复杂情况使用计算属性或函数，如下：
<template>
<div v-show="getLimitData(data)">
...
</div>
</template>
// 反例
<template>
<div v-show="data.type !== 'dir' && dzqz && hasBtn && attrs.mode !== 'ended'">
...
</div>
</template>
3.活用v-show, v-if (不要同时出现在一个标签上）
4.避免重复
避免过多重复代码，如果超过三行类似的代码，配置数据再循环遍历
css规范
1. 避免使用标签选择器。因为在 Vue 中，特别是在局部组件，使用标签选择器效率特别低，损耗性能，建议需要的情况，直接定义 class
2. 非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外
3. 避免使用important选择器
4. 避免大量的嵌套规则，控制在3级之内，对于超过4级的嵌套，考虑重写或新建子项
5. 避免使用ID选择器及全局标签选择器防止污染全局样式
6. 提取公用样式进assets文件styles里，按模块/功能区分
|assets
|-- styles
| |-- common 放置公用样式，如重置，混合，复写element样式等
| |-- modules 放置模块样式
7. 推荐使用直接子选择器
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}
/* 不推荐 */
*{}
#jdc {}
.jdc div{}
8. 使用 scoped 关键字，约束样式生效的范围
9. 使用变量 可复用属性尽量抽离为页面变量，易于统一维护
/* scss */
$color: red;
.class-name {
color: $color;
border-color: $color;
}
10. 样式覆盖
组件内部需要覆盖UI框架样式，必须在最外层组件加类名
11. class命名以小写字母开头，小写字母、中划线和数字组成。不建议使用驼峰法命名 class 的属性
###js规范
1. 优先考虑三目运算符，不写超过3层的三目运算符
2. 增删查改，详情统一使用如下 5 个单词
add / update / delete / detail / get
3. 尽量使用es6语法精简代码
4. 超过3层的if或者for尽量抽离公用方法
5. 使用有意义，可读性好的变量名
反例:
var yyyy = moment().format('YYYY/MM/DD');
正例:
var yearMonthDay = moment().format('YYYY/MM/DD');
