代码规约
命名规范
1、项目、目录命名
采用小写方式，以中线“-”分隔
js
正例：pro-gic-web
反例：proGicWeb pro_gic_web正例：pro-gic-web
反例：proGicWeb pro_gic_webjs
正例：/src/views/user-setting/
反倒：/src/views/userSetting/ /src/views/UserSetting/正例：/src/views/user-setting/
反倒：/src/views/userSetting/ /src/views/UserSetting/2、文件命名规范
一般文件命名： 小驼峰，首字母小写，每个单词首字母大写
js
正例：`userInfoPage.vue` `userInfoPage.tsx`
反例：`user_Info_Page.vue` `user-info-page.tsx`正例：`userInfoPage.vue` `userInfoPage.tsx`
反例：`user_Info_Page.vue` `user-info-page.tsx`3、组件命名：
组件命名：大驼峰，首字母大写，每个单词首字母大写
js
正例：`CustomeUpload.vue`
反例：`customeUpload.vue` `custom-form.tsx`正例：`CustomeUpload.vue`
反例：`customeUpload.vue` `custom-form.tsx`4、方法,事件命名规范
- 普通方法： 常用方法以动词 + 名词 小驼峰形式进行对方法进行语义命名 如:
sendMessage()
- 普通方法： 常用方法以动词 + 名词 小驼峰形式进行对方法进行语义命名 如:
- 类方法、类：大驼峰
jsclass User {} function User() {}class User {} function User() {}- 事件名：handle + 名称（可选）+ 动词
jsexport default { methods: { handleItemClick() { //... }, handleItemHover() { //... }, }, }export default { methods: { handleItemClick() { //... }, handleItemHover() { //... }, }, }
附： 常用方法动词
js
get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
import 导入/export 导出,
inject 注入/extract 提取,
view 查看/browse 浏览
edit 编辑/modify 修改,
copy 复制/paste 粘贴,
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
compile 编译/execute 执行,
debug 调试/trace 跟踪
build 构建/publish 发布
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
import 导入/export 导出,
inject 注入/extract 提取,
view 查看/browse 浏览
edit 编辑/modify 修改,
copy 复制/paste 粘贴,
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
compile 编译/execute 执行,
debug 调试/trace 跟踪
build 构建/publish 发布
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成5、变量，常量命名规范
- 变量：小驼峰
- 普通变量
userId - 布尔变量：
is/has等表示含义 如：isVisible - 数组集合等： 以
list/s结尾 如：userList/users
- 普通变量
- 常量：单词字母大写，单词之间通过下划线连接
- 如：
const MAX_IMAGE_SIZE = 10 * 1024 * 1024;
- 如：
6、注释规范
- 单行注释
双斜杠结尾: 行内注释 - 多行注释:函数注释，尤其是公用函数，变更、枚举使用
js
/**
* 组件/方法 名称
* @module 存放位置
* @desc 描述
* @author 作者
* @date 时间
* @param {Object} [title] - 参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
**//**
* 组件/方法 名称
* @module 存放位置
* @desc 描述
* @author 作者
* @date 时间
* @param {Object} [title] - 参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
**/工具与插件
开发工具
推荐：VSCode
代码格式和代码质量的校验： EsLint + Prettier
- 统一处理缩进、格式化、空格、括号、单双引约束、结尾封号等代码风格
- 统一检查命名规范、申明引用、类型检查等质量约束
CSS 处理器：Less
- 组件内样式 使用 scoped
Vue 规范
API 风格
推荐：组合式 AP vue3 默认支持两种不同的风格书写：选项式 API 和 组合式 AP
Script setup
- 自动注册子组件
- 属性和方法无需返回
- 推荐
js
<template>
<button @click="count++">自加{{ count }}</button>
<button @click="decrease">自减{{ count }}</button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let count = ref(0);
const decrease = ()=>{
count.value --;
}
</script>
<style lang="less" scoped></style><template>
<button @click="count++">自加{{ count }}</button>
<button @click="decrease">自减{{ count }}</button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let count = ref(0);
const decrease = ()=>{
count.value --;
}
</script>
<style lang="less" scoped></style>- 不推荐
js
<template>
<button @click="count++">自加{{ count }}</button>
<button @click="decrease">自减{{ count }}</button>
</template>
<script lang="ts">
import { ref } from 'vue';
export default defineComponent({
setup(){
let count = ref(0);
const decrease = ()=>{
count.value --;
}
return {count,decrease}
}
})
</script>
<style lang="less" scoped></style><template>
<button @click="count++">自加{{ count }}</button>
<button @click="decrease">自减{{ count }}</button>
</template>
<script lang="ts">
import { ref } from 'vue';
export default defineComponent({
setup(){
let count = ref(0);
const decrease = ()=>{
count.value --;
}
return {count,decrease}
}
})
</script>
<style lang="less" scoped></style>文件拆分
文件代码量大时，可以单独定义数据代码 data.ts 和 逻辑代码 .servier.ts 文件目录结构
js
├── user-info
│ ├── index.data.ts // 变量、数据
│ ├── index.service.ts // 逻辑、事件
│ └── index.vue // 视图├── user-info
│ ├── index.data.ts // 变量、数据
│ ├── index.service.ts // 逻辑、事件
│ └── index.vue // 视图