大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全

我这里提供一份我自己在使用的项目代码规范   
    
    
，当然我这里比较简陋


     


     


    ，有补充的可以打在评论区 




 




 


，我丰富到文章里去   
    
    
。

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

分支管理 命名规范 解释 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: 修改构建

 大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全