我这里提供一份我自己在使用的项目代码规范，当然我这里比较简陋，有补充的可以打在评论区，我丰富到文章里去。
1.组件命名规范
components下的组件命名规范遵循大驼峰命名规范。
示例：components/AlbumItemCard/AlbumItemCard.vue
小驼峰式命名法（lower camel case）： 第一个单词以小写字母开始；第二个单词的首字母大写，例如：myName
大驼峰式命名法（upper camel case）： 每一个单字的首字母都采用大写字母，例如：MyName
2.目录命名规范
pages下的文件命名规范：遵循小驼峰命名规范。
示例：pages/createAlbum/createAlbum.vue
3.CSS命名规范
class命名规范为中划线。
示例：
<template>
<view class="gui-padding">
...
</view>
</template>
<style lang="scss" scoped>
.gui-padding {
...
}
</style>
css使用scss进行书写。
4.代码注释规范
行内注释://
函数注释：
/**
* @description: 加深颜色值
* @param {string} color 颜色值字符串
* @returns {*} 返回处理后的颜色值
*/
export function getDarkColor(color: string, level: number) {
const reg = /^#?[0-9A-Fa-f]{6}$/
if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值')
const rgb = hexToRgb(color)
for (let i = 0; i < 3; i++)
rgb[i] = Math.round(20.5 * level + rgb[i] * (1 - level))
return rgbToHex(rgb[0], rgb[1], rgb[2])
}
接口注释：
/**
* @description 获取后台用户分页列表(带搜索)
* @param page
* @param limit
* @param username
* @returns {<PageRes<AclUser.ResAclUserList>>}
* @docs https://xxxx
*/
export function getAclUserList(params: AclUser.ReqAclUserListParams) {
return http.get<PageRes<AclUser.ResAclUserList>>(
`/admin/acl/user/${params.pageNum}/${params.pageSize}`,
{ username: params.username },
)
}
5.接口书写规范
5.1 接口定义规范：
接口全部写在api目录下面，按照功能划分，分为不同的目录。
比如搜索接口，定义在api/search/index.ts下面。
5.2 接口书写规范：
统一使用类方法，内部方法定义每个接口，最后统一export，接口使用到的类型全部定义在同级目录的interfaces.ts文件中。比如搜索相关的接口：
import Service from '../../utils/request'
import { SearchItemInterface, SearchPageResponseInterface, SearchParamsInterface } from "./interfaces"
class CateGory extends Service {
/**
* @description 搜索功能
* @param {SearchParamsInterface} params 二级分类Id
*/
// 搜索
getSearchAlbumInfo(params: SearchParamsInterface) {
return this.post<SearchPageResponseInterface<SearchItemInterface[]>>({
url: '/api/search/albumInfo',
data: params
})
}
/**
* @description: 获取搜索建议
* @param {string} keyword 搜索关键字
* @return {*}
*/
getSearchSuggestions(keyword: string) {
return this.get<string[]>({
url: `/api/search/albumInfo/completeSuggest/${keyword}`,
loading:false
})
}
}
export const search = new CateGory()
5.3 接口类型定义：
// 搜索参数
export interface SearchParamsInterface {
keyword: string;
category1Id?: number | null;
category2Id?: number | null;
category3Id?: number | null;
attributeList?: string[] | null;
order?: string | null;
pageNo?: number;
pageSize?: number;
}
// 搜索结果item向接口
export interface SearchItemInterface {
id: number;
albumTitle: string;
albumIntro: string;
announcerName: string;
coverUrl: string;
includeTrackCount: number;
isFinished: string;
payType: string
createTime: string;
playStatNum: number;
collectStatNum: number;
buyStatNum: number;
albumCommentStatNum: number;
}
5.4 接口引用
所有export的类接口方法都在api/index.ts中统一引入：
export { courseService } from './category/category'
export { albumsService } from './albums/albums'
export { search } from './search/search'
在页面中使用：
<script>
import { courseService } from "../../api"
/**
* @description: 获取所有分类
* @returns {*}
*/
const getCategoryList = async () => {
try {
const res = await courseService.findAllCategory()
} catch (error) {
console.log(error)
}
}
</script>
6.分支命名规范
| 分支管理 | 命名规范 | 解释 |
|---|---|---|
| master 主分支 | master | 稳定版本分支，上线完成回归后后，由项目技术负责人从 release 分支合并进来，并打 tag |
| test 测试分支 | test/版本号示例：test/1.0.0 | 测试人员使用分支，测试时从 feature 分支合并进来，支持多人合并 |
| feature 功能开发分支 | feature/功能名称示例：feature/blog | 新功能开发使用分支，基于master建立 |
| bugfix修复分支 | bugfix/功能名称示例：fix/blog | 紧急线上bug修复使用分支，基于master建立 |
| release 上线分支 | release/版本号示例：release/0.1.0 | 用于上线的分支，基于 master 建立，必须对要并入的 分支代码进行 Code review 后，才可并入上线 |
7.代码提交规范
| 前缀 | 解释 | 示例 |
|---|---|---|
| feat | 新功能 | feat: 添加新功能 |
| fix | 修复 | fix: 修改bug |
| docs | 文档变更 | docs: 更新文档 |
| style | 代码样式变更 | style: 修改样式 |
| refactor | 重构 | refactor: 重构代码 |
| perf | 性能优化 | perf: 优化了性能 |
| test | 增加测试 | test: 单元测试 |
| revert | 回退 | revert: 回退代码 |
| build | 打包 | build: 打包代码 |
| chore | 构建过程或辅助工具的变动 | chore: 修改构建｜ |
