# vue代码规范

好的 👍 我来帮你整理一份 适用于 Vue 语法的 UniApp 项目代码规范文档，以 Markdown 格式 给出，涵盖：项目结构、文件命名、Vue 组件规范、样式规范、注释规范、JavaScript 逻辑编写等。

下面是完整的内容，你可以直接复制到 CODE_STYLE.md 或 开发规范.md 中使用：

# UniApp 项目代码规范文档

# 1. 项目结构

uniapp-project/
│── pages/                # 页面目录
│   ├── index/            # 首页
│   │   ├── index.vue
│   │   └── index.scss
│   └── user/             # 用户相关页面
│       ├── login.vue
│       └── register.vue
│
│── components/           # 公共组件
│   ├── my-header.vue
│   └── my-footer.vue
│
│── uni_modules/          # 插件目录
│
│── static/               # 静态资源（图片、字体、音频等）
│   ├── images/
│   ├── fonts/
│   └── audio/
│
│── common/               # 公共方法与工具类
│   ├── utils.js
│   ├── request.js
│   └── config.js
│
│── store/                # 状态管理（Vuex/Pinia）
│
│── manifest.json         # 配置文件
│── pages.json            # 页面路由配置
│── uni.scss              # 全局样式
✅ Copy success!

# 2. 文件命名规范

页面/组件文件：统一使用 小写 + 中划线
- ✅ user-center.vue
- ❌ UserCenter.vue
目录命名：统一使用 小写 + 中划线
- ✅ user-info/
静态资源：
- 图片：模块名-功能名.png → user-avatar.png
- 样式：index.scss 与 index.vue 同名

# 3. Vue 文件规范

# 3.1 组件结构顺序

<template>
  <view class="user-center">
    <text class="title">{{ title }}</text>
  </view>
</template>

<script>
export default {
  name: "user-center", // 组件名称，统一小写-中划线
  props: {
    title: {
      type: String,
      default: "用户中心"
    }
  },
  data() {
    return {
      userInfo: {}
    }
  },
  computed: {
    isLogin() {
      return !!this.userInfo.token
    }
  },
  watch: {
    userInfo(val) {
      console.log("用户信息更新", val)
    }
  },
  methods: {
    async getUserInfo() {
      try {
        let res = await uni.request({ url: "/api/user/info" })
        this.userInfo = res.data
      } catch (e) {
        console.error("获取用户信息失败", e)
      }
    }
  },
  onLoad() {
    this.getUserInfo()
  }
}
</script>

<style lang="scss" scoped>
.user-center {
  padding: 20rpx;

  .title {
    font-size: 32rpx;
    color: #333;
  }
}
</style>
✅ Copy success!

# 4. CSS/SCSS 命名规范

使用 BEM 规范（Block-Element-Modifier）
- .card {} → Block
- .card__title {} → Element
- .card--active {} → Modifier

示例：

.card {
  padding: 20rpx;
  &__title {
    font-size: 32rpx;
  }
  &--active {
    background-color: #f5f5f5;
  }
}
✅ Copy success!

# 5. JS/TS 书写规范

变量命名：camelCase 小驼峰
- ✅ userInfo
- ❌ User_Info
常量命名：UPPER_CASE
- ✅ API_BASE_URL
类命名：PascalCase
- ✅ UserService
函数命名：动词开头
- ✅ getUserInfo()
- ✅ setUserInfo()

# 6. 注释规范

# 6.1 文件头部注释

/**
 * @description 用户请求封装
 * @author ***
 * @date 2025-08-28
 */
✅ Copy success!

# 6.2 方法注释

/**
 * 获取用户信息
 * @param {String} userId 用户ID
 * @returns {Promise<Object>} 用户信息
 */
async function getUserInfo(userId) {
  return await uni.request({ url: `/api/user/${userId}` })
}
✅ Copy success!

# 6.3 逻辑注释

// 校验用户是否已登录
if (!this.isLogin) {
  uni.navigateTo({ url: "/pages/login/login" })
}
✅ Copy success!

# 7. 页面/组件交互规范

页面内方法以 handle 开头
- ✅ handleLoginClick()
- ✅ handleSubmitForm()
接口请求方法以 get/post/put/delete 开头
- ✅ getUserList()
公共工具方法以动词开头
- ✅ formatDate()

# 8. Git 提交规范

feat: 新功能
fix: 修复 Bug
docs: 文档修改
style: 样式修改（不影响功能逻辑）
refactor: 代码重构
test: 添加测试
chore: 构建或辅助工具变动

示例：

feat: 新增用户登录功能
fix: 修复登录页面跳转 bug
style: 调整首页标题样式
✅ Copy success!

# 9. 代码风格约定

使用 ESLint + Prettier 保持统一格式
统一缩进：2 个空格
语句结束必须加 ;
单引号 ' 代替双引号 "

# 10. 其他规范

所有接口地址统一维护在 common/config.js
不允许在页面直接写接口，需封装到 common/request.js
页面逻辑保持单一，复杂逻辑抽离到 utils.js

✅ 以上就是一份 完整的 UniApp Vue 开发代码规范文档，涵盖了常用开发场景。

👉 这样一来：

点击/切换/输入等 UI 事件 → onXxx

具体业务逻辑 → handleXxx

接口调用 → get/post/put/deleteXxx

通用工具方法 → 动词 + 名词

形成清晰分层，团队代码一眼就能区分逻辑职责。

=============== 明白了 ✅ 你是希望我把 常用的 on... 方法命名场景 全部列出来，做成一份清单，开发时直接对照就能用了。

我帮你整理一个 「on事件命名清单」，涵盖 点击、输入、切换、提交、选择、加载、滚动、拖拽、刷新等常见场景。

# 11. 方法命名规范（补充常用 on...）

# 11.1 点击类

onClickButton() —— 点击按钮
onClickLogin() —— 点击登录
onClickLogout() —— 点击退出
onClickItem(item) —— 点击列表项
onClickBack() —— 点击返回

# 11.2 输入/修改类

onInputChange(e) —— 输入框内容变化
onInputSearch(e) —— 搜索框输入
onChangeSwitch(val) —— 开关切换
onChangeCheckbox(val) —— 复选框切换
onChangeRadio(val) —— 单选框切换
onChangeTab(index) —— Tab 切换
onChangeDate(val) —— 日期选择

# 11.3 提交/确认类

onSubmitForm(data) —— 提交表单
onConfirmDialog() —— 确认弹窗
onCancelDialog() —— 取消弹窗

# 11.4 选择类

onSelectItem(item) —— 选择某个选项
onSelectAddress(addr) —— 选择地址
onSelectFile(file) —— 选择文件
onSelectImage(img) —— 选择图片

# 11.5 加载/刷新类

onLoadPage() —— 页面加载完成
onRefreshData() —— 页面刷新
onPullDownRefresh() —— 下拉刷新
onReachBottom() —— 触底加载更多

# 11.6 滚动/拖拽类

onScrollPage(e) —— 页面滚动
onScrollToTop() —— 滚动到顶部
onScrollToBottom() —— 滚动到底部
onDragStart(e) —— 拖拽开始
onDragMove(e) —— 拖拽中
onDragEnd(e) —— 拖拽结束

# 11.7 其他场景

onOpenModal() —— 打开弹窗
onCloseModal() —— 关闭弹窗
onPlayAudio() —— 播放音频
onPauseAudio() —— 暂停音频
onErrorRequest(err) —— 请求出错
onSuccessRequest(res) —— 请求成功

# 代码示例

<template>
  <view>
    <button @click="onClickLogin">登录</button>
    <input @input="onInputChange" />
    <switch @change="onChangeSwitch" />
    <form @submit="onSubmitForm"></form>
    <scroll-view @scrolltolower="onReachBottom"></scroll-view>
  </view>
</template>

<script>
export default {
  methods: {
    onClickLogin() {
      this.handleLogin()
    },
    onInputChange(e) {
      this.searchKey = e.detail.value
    },
    onChangeSwitch(val) {
      this.isOpen = val
    },
    onSubmitForm(data) {
      this.handleSubmit(data)
    },
    onReachBottom() {
      this.handleLoadMore()
    }
  }
}
</script>
✅ Copy success!

这样整理之后，团队就可以直接对照使用，看到 onClickXXX 就知道是 UI交互事件，看到 handleXXX 就知道是 业务逻辑方法。

要不要我帮你把 这些 on...清单 也合并进之前的 完整代码规范文档，出一个最终整合版 CODE_STYLE.md？

← 🧩🧩AI claude Code tailwindcss →