前端规范
大约 4 分钟
开发人员遵循统一规范进行开发
命名
命名的过程本身就是一个抽象和思考的过程，当不能给一个模块、一个对象、一个函数，甚至一个变量找到合适的名称时，往往说明对问题的理解还不够透彻，需要重新去挖掘问题的本质，对问题域进行重新分析和抽象，有时还要调整设计和重构代码。因此，好的命名是写出好代码的基础。
- 项目命名: 小写形式，短横线连接
- 文件夹命名: 除vue工程的components下的文件夹外，采用
kebab-case，有复数结构时，要采用复数命名法，缩写不用复数 - 图片资源文件：小写形式，下划线连接
- 文件命名： 除
.vue组件型单文件 和 图片资源文件 外，采用kebab-case(包括vue页面文件eg:index.vue) - 函数命名：
camelCase(小驼峰)，操作的方法前缀尽可能用动词 - 样式class命名：小写形式，短横线连接
- scss变量：
kebab-case， 以$开头 - vue组件命名:
PascalCase(大驼峰)，组件name与文件名一致 - ref命名:
camelCase(小驼峰)，后缀加Ref - path路径：
kebab-case - interface接口：
PascalCase
注意：
- 严禁中英文混合的命名形式，尽量避免纯中文拼音命名
编码
HTML
- 尽量减少嵌套层级
CSS/Less/Scss
- 省略值为0时的单位
JS
- 变量声明不用
var - 不允许省略大括号（如if后面的大括号）
- 比较长一点的复杂一点的函数需要加注释
- 接口字段要写注释表明含义
- 函数的单一目的性，假如一个函数不好写单元测试，那么这个函数就需要调整
Vue
props要指明类型，尽量详细明确v-for要设置key- 组件上面较复杂的
if判断要加注释
注意：
- 无必要，不加注释；有必要，尽量详细
IDE配置
- 安装ESLint插件，配置保存时lint和格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.formatOnSave": true单元测试
- vite构建的vue项目建议使用
vitest - webpack构建的项目使用
jest - 新写的
公共方法或者公共/比较独立的组件需要写单元测试/组件测试- 单元测试
- 组件测试
关于CodeReview
mono repo 项目结构与操作
项目运行步骤（一般统一采用 pnpm 包管理器）
# npm淘宝镜像
npm config set registry https://registry.npmmirror.com/
# 全局安装 pnpm
npm install -g pnpm
# 安装依赖
pnpm install
# 运行项目, pnpm运行脚本即可
pnpm dev项目中安装依赖
# eg：在根目录上添加 axios 包
pnpm add axios -w
# eg: 给 packages下面的 main项目 添加 axios 包
pnpm add axios --filter main- 项目中
package.json的脚本名称保持一致: 如dev，build:dev，build:test,build:prod
微前端microp-app的集成
- 主项目
main中安装micro-app - 根据 文档 中的使用方法在主应用中嵌入其他的项目
分支/版本
- 版本名称： V[大版本].[小版本].[修订版本]；初始版本V0.1.0
pnpm changeset， 提交修订变更信息，pnpm version, 提升包版本- 在dev合并到test分支时，需要打tag，升级修订版本：如V0.1.0升级到V0.1.1
拆分后的单仓与大仓项目结构
整体是单仓与大仓的结合方式，在一定的规则下可形成自由组合
- 公共组件工具仓（npm库的形式构建导出，或者直接引入使用）
- 登录、权限、状态等中心仓（采用
monorepo的结构，适应多种不同权限需求：如平台使用、单个项目使用、定制使用；通过submodule依赖集成或者microapp集成需要的子项目都可以） - 多个不同的业务项目单仓（既可单独运行，也可以作为子项目跟着中心仓库走，在中心仓库集中开发、调试、打包管理，假如依赖集成就需要结构和配置与中心仓库中项目保持一致，
import导入时采用相对路径（直接使用中心仓的可以用alias），不要采用自动导入的方式，实行多分支管理）
注意:
- 时刻保持公共组件、子项目的的更新：
pnpm update <package-name> - 多仓更加注意
- submodule 的使用:
git submodule add -b feature-init -f http://ip:port/cas/rep.git packages/rep
- 保持公共仓与中心仓的稳定
- 定期清理重新安装本地的
node_modules，因为pnpm会保存依赖仓库不同的提交的版本，多次update之后会越来越多