让我看看你们公司的代码规范都是啥样的？

我这里提供一份我自己在使用的项目代码规范，当然我这里比较简陋，有补充的可以打在评论区，我丰富到文章里去。

1.组件命名规范

components下的组件命名规范遵循大驼峰命名规范。

示例：conpnents/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.接口书写规范

4.1 接口定义规范：

接口全部写在api目录下面，按照功能划分，分为不同的目录。

比如搜索接口，定义在api/search/index.ts下面。

4..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()

4.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;

}

4.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.分支命名规范

7.代码提交规范