vue项目规范

玛琪玛的爹

已于 2023-04-11 10:29:45 修改

阅读量376

点赞数

文章标签： vue.js javascript 前端

于 2022-11-11 21:49:55 首次发布

本文链接：https://blog.csdn.net/weixin_42540188/article/details/127813811

版权

## 规范内容

- 命名规范：规范项目中的各类命名，保持项目命名格式统一化

- 目录规范：规范项目中的目录结构，保持项目结构统一化

- 注释规范：规范项目中代码的注释，类注释，方法注释以及其他文件注释

- 项目配置：严格控制项目配置，不可随意改动

## 命名规范

项目中的基本命名说明如下，请仔细查看

| 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 请根据页面布局，功能模块命名

```

</main>

</div>

```

> 大家请善用HTML5的语义标签，增加代码可读性。[查看](https://www.w3school.com.cn/tags/index.asp)

### 5. router 路由定义

`中线命名法`

> 路由定义可根据页面模块文件命名来定义，这样清晰明了，一一对应

```

{

path: '/base-component',

component: () => import( /* webpackChunkName: "mv-map-component" */ '@/views/mv-map/doc-views/base-component'),

children: [{

path: 'mv-map',

component: () => import('@/views/mv-map/doc-views/base-component/mv-map')

}, {

path: '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类注释

> 方法需要说明、入参、出参（类型和含义）

```

/**

* 获取cookie

* @param {String} key 键

* @returns {String} 值

function getCookie (key) {}

/**

* 事件相关的sdk

class EventSdk {

/**

* 构造函数

* @param {String} 事件id

constructor (id) {}

/**

* 初始化

init () {}

}

/**

* 方法的基本说明

* @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放在最前面

* 其后代码按照以下排序分段用空行区分显示

* 常量变量在前

* 生命周期在中间

* 方法函数在后面

```

/**

* @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>

```

玛琪玛的爹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
vue项目规范

团队开发中，编码规范是极其重要的，这里涵盖了几乎所有命名的规范
复制链接

扫一扫

vue项目规范

“相关推荐”对你有帮助么？