前端规范

开发人员遵循统一规范进行开发

命名

命名的过程本身就是一个抽象和思考的过程，当不能给一个模块、一个对象、一个函数，甚至一个变量找到合适的名称候，往往说明对问题的理解还不够透彻，需要重新去挖掘问题的本质，对问题域进行重新分析和抽象，有时还要调整设计和重构代码。因此，好的命名是写出好代码的基础。

1. 项目命名: 小写形式，短横线连接
2. 文件夹命名: 除vue工程的components下的文件夹外，采用kebab-case，有复数结构时，要采用复数命名法，缩写不用复数
3. 图片资源文件：小写形式，下划线连接
4. 文件命名： 除.vue组件型单文件 和 图片资源文件 外，采用kebab-case(包括vue页面文件eg:index.vue)
5. 函数命名：camelCase (小驼峰)，操作的方法前缀尽可能用动词
6. 样式class命名：小写形式，短横线连接
7. scss变量：kebab-case， 以$开头
8. vue组件命名: PascalCase(大驼峰)，组件name与文件名一致
9. ref命名: camelCase (小驼峰)，后缀加Ref
10. path路径：kebab-case
11. interface接口：PascalCase

注意：

• 严禁中英文混合的命名形式，尽量避免纯中文拼音命名

编码

HTML

1. 尽量减少嵌套层级

CSS/LESS/SCSS

1. 省略值为0时的单位

JS

1. 变量声明不用var
2. 不允许省略大括号（如if后面的大括号）
3. 比较长一点的复杂一点的函数需要加注释
4. 接口字段要写注释表明含义

Vue

1. props 要指明类型，尽量详细明确
2. v-for 要设置 key
3. 组件上面较复杂的if判断要加注释

注意：

• 无必要，不加注释；有必要，尽量详细

IDE配置

1. 安装ESLint插件，配置保存时lint和格式化

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
},
"editor.formatOnSave": true

单元测试

1. vite构建的项目使用vitest
2. 新写的公共方法或者公共/比较独立的组件需要写单元测试/组件测试
   • 单元测试
   • 组件测试

关于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

微前端的集成

• 主项目 main 中安装 micro-app
• 根据 文档 中的使用方法在主应用中嵌入其他的项目

分支/版本

• 版本名称： V[大版本].[小版本].[修订版本]；初始版本V0.1.0
• pnpm changeset， 提交修订变更信息，pnpm version, 提升包版本
• 在dev合并到test分支时，需要打tag，升级修订版本：如V0.1.0升级到V0.1.1

拆分后的单仓与大仓项目结构

整体是单仓与大仓的结合方式，在一定的规则下可形成自由组合

1. 公共组件工具仓（npm库的形式构建导出，或者直接引入使用）
2. 登录、权限、状态等中心仓（采用monorepo的结构，适应多种不同权限需求：如平台使用、单个项目使用、定制使用；通过submodule依赖集成或者microapp集成需要的子项目都可以）
3. 多个不同的业务项目单仓（既可单独运行，也可以作为子项目跟着中心仓库走，在中心仓库集中开发、调试、打包管理，假如依赖集成就需要结构和配置与中心仓库中项目保持一致，import导入时采用相对路径（直接使用中心仓的可以用alias），不要采用自动导入的方式，实行多分支管理）

注意:

1. 时刻保持公共组件、子项目的的更新： pnpm update <package-name>
2. 多仓更加注意
3. submodule 的使用:

git submodule add -b feature-init -f http://ip:port/cas/rep.git packages/rep

1. 保持公共仓与中心仓的稳定
2. 定期清理重新安装本地的node_modules，因为pnpm会保存依赖仓库不同的提交的版本，多次update之后会越来越多