## 规范内容
- 命名规范：规范项目中的各类命名，保持项目命名格式统一化
- 目录规范：规范项目中的目录结构，保持项目结构统一化
- 注释规范：规范项目中代码的注释，类注释，方法注释以及其他文件注释
- 项目配置：严格控制项目配置，不可随意改动
## 命名规范
项目中的基本命名说明如下，请仔细查看
| name | 例子 |
| -------------- | ----------- |
| `中线命名法` | hello-world |
| `下划线命名法` | hello_world |
| `小驼峰命名法` | helloWorld |
| `大驼峰命名法` | HelloWorld |
### 1. 组件
`大驼峰命名`（index.vue除外）
```
|- List.vue
|- ListTabs.vue
|- Detail.vue
|- DetailFrom.vue
|- index.vue
```
### 2. 文件夹，js、css、less、html、图片文件
`中线命名法`
> 请根据功设置命名前缀
例：
```
|- collaborative-disposal // 文件夹
| |- static
| | |- images
| | | |- event-accident.png // 图片
| | | |- event-build.png
| | | |- event-flow.png
| | |- styles
| | | |- event-list.less // less
| |- lib
| | |- event-list.js // js
| |- index.html // html
| |- event-list.html
```
### 3. Class 类名
`大驼峰命名法`
```
class DemoSdk {}
```
### 4. html 属性
- class： `中线命名法`
- id： `中线命名法`
- ref： `小驼峰命名`
> class 请根据页面布局，功能模块命名
```
<div class="layout-wrapper">
<!-- 头部 -->
<header class="layout-header" ref="layoutHeader"></header>
<!-- 主内容 -->
<main class="layout-main" id="main">
</main>
<!-- 底部 -->
<footer class="layout-footer"></footer>
</div>
```
> 大家请善用HTML5的语义标签，增加代码可读性。[查看](https://www.w3school.com.cn/tags/index.asp)
### 5. router 路由定义
`中线命名法`
> 路由定义可根据页面模块文件命名来定义，这样清晰明了，一一对应
```
{
path: '/base-component',
name: 'base-component',
component: () => import( /* webpackChunkName: "mv-map-component" */ '@/views/mv-map/doc-views/base-component'),
children: [{
path: 'mv-map',
name: 'mv-map',
component: () => import('@/views/mv-map/doc-views/base-component/mv-map')
}, {
path: 'mv-map-icon',
name: 'mv-map-icon',
component: () => import('@/views/mv-map/doc-views/base-component/mv-map-icon')
}]
}
```
### 6. 配置项, 常量
`纯大写 下划线命名法`
```
const TITLE: 'microvideo',
const TOKEN_KEY: 'mv-',
```
> 常量请用 const定义
### 7. vue全局挂载
`以$为前缀，小驼峰命名`
```
Vue.prototype.$localStorage = localStore
```
### 8. 函数，方法
- 命名方法： 小驼峰式命名法
- 命名规范： 前缀应该为动词
- 命名建议： 常用动词约定
> 以下列出了常用动词约定，有该场景的请用其前缀，在业务场景简单时，可以直接使用该动词命名方法
| 动词 | 含义 |
| ------ | ---------------------- |
| can | 判断是否可执行某个动作 |
| has | 判断是否含义某个值 |
| is | 判断是否为某个值 |
| get | 获取某个值 |
| set | 设置某个值 |
| init | 初始化操作 |
| handle | 点击操作触发 |
| load | 加载某些数据 |
| add | 添加操作 |
| del | 删除操作 |
| clear | 清空操作 |
| change | 变化操作 |
| edit | 编辑操作 |
| update | 更新操作 |
```
/**
* 初始化
*/
init() {}
/**
* 获取数据
*/
getData() {}
/**
* 点击重置
*/
handleReset() {}
```
## 目录
> 这里针对src以下目录进行规范说明
### api
> 接口配置文件夹
- 请根据业务模块建文件夹，以业务名命名
### components
- 公共组件请放在这里，按照功能划分文件夹
- 对于复杂的组件，模块下可以分子模块，需配置index.js安装入口
已mv-map 组件为例
```
|- mv-map
| |- components 子组件 文件夹
| |- config 配置 文件夹
| |- lib 库 文件夹
| |- static 资源 文件夹
| | |- images 图片 文件夹
| | |- styles 样式 文件夹
| |- index.js 入口文件
```
### views
- 按业务模块路由在views划分文件夹
- 每个模块文件夹设有index.vue入口文件，components 业务组件， page 页面
```
|- module 模块 文件夹
| |- controls 控件（该模块下独有控件） 文件夹
| |- pages 子页面 文件夹
| | |- list 列表 页面
| | | |- ListTop.vue 列表头部
| | | |- index.vue 列表 入口
| | |- Detail.vue 详情 页面
| |- index.vue 模块 入口页面
```
#### module/index.vue 入口页面的要求
> 当该模块下需要index.vue来划分页面进入子路由时，请创建index.vue;反之无需创建index.vue
1. 作为同级pgaes里相应子页面的引入入口文件，可放置多个router-view标签搭建页面（以[命名视图](https://router.vuejs.org/zh/guide/essentials/named-views.html)实现）
2. 可以根据权限、业务等维度对页面引入加以条件筛选
3. index.vue只围绕子页面的引入与不引入、显示与不显示，包含布局
#### module/pages 子页面的要求
1. 所有模块的子页面都对应一个路由地址，都是由路由引入显示
2. 页面的组件拆分需要根据业务，不能只根据UI设计拆分
#### module/controls 子控件的要求
1. 必须有数据输入，不可以自己产生数据，只负责展示
2. 所有交互不能具有业务属性，若设计业务属性，需要通过事件暴露
### router
```
|- router 路由
| |- modules 路由模块 文件夹
| | |- module1.js 模块1 路由配置
| | |- module2.js 模块1 路由配置
| |- index.js 路由配置入口文件
```
### store
```
|- store vuex管理
| |- modules vuex 子模块
| | |- module1.js 模块1
| | |- module2.js 模块1
| |- index.js vuex入口文件
```
## 注释规范
两类注释
1. 多行注释
```
/**
* 基本说明
* @author 作者名
* @date 时间：2022/2/23
*/
```
2. 单行注释
```
// 基本说明
```
### 多行注释
- 文件顶部注释
```
/**
* 文件功能的基本说明
* @author 作者名
* @date 时间
*/
```
- 方法、Class类注释
> 方法需要说明、入参、出参（类型和含义）
```
<!-- 场景1 方法注释 -->
/**
* 获取cookie
* @param {String} key 键
* @returns {String} 值
*/
function getCookie (key) {}
<!-- 场景2 Class注释 -->
/**
* 事件相关的sdk
*/
class EventSdk {
/**
* 构造函数
* @param {String} 事件id
*/
constructor (id) {}
/**
* 初始化
*/
init () {}
}
<!-- 场景3 修改他人文件方法时 -->
/**
* 方法的基本说明
* @update 小明 2022/2/23
* 修改的基本说明
*/
```
### 单行注释
- 方法里 多个逻辑模块 空格分隔并单行注释说明
```
function init () {
// 重置表单
resetForm()
// 获取列表
getList()
}
```
- 若有多个单行代码后面的注释 请保持统一列 格式化
```
let object = {
name:'', // 姓名
sex:'', // 性别
birthday:'', // 生日
}
```
## 项目配置
### package.json
只能架构师修改
### package-lock.json
该文件不可上传
### 环境配置文件
环境配置文件只能由一人修改提交
```
|- .env.development 开发环境配置
|- .env.production 生产环境配置
|- .env.staging 模拟（测试）环境配置
```
### 样式
- 只能使用less css预处理器
- 请避免使用行内样式
- 页面主色调 请在src/assets/styles/variable.less 设置变量使用
- import css 需要标注注释说明
- 请避免使用标签选择器
## Vue3
> 在使用纯setup写法时，为了提高可读性，请按照以下规定开发
* import放在最前面
* 其后代码按照以下排序分段用空行区分显示
* 常量变量在前
* 生命周期在中间
* 方法函数在后面
```
<script setup>
/**
* @desc 文件注释
* @auther xxx
* @date xxx
* **/
import { ref, onMounted } from 'vue'
const TITLE = '标题'
const data = ref(null)
onMounted(() => {
getData()
})
/**
* 获取数据
* @param {String} id 事件id
*/
const getData = (id) => {}
</script>
```本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
