# 开发vue

## 规则（Rules）

# Vue开发规范

## 1. 组件命名

组件文件名、注册名、模板引用必须统一使用小写蛇形（snake_case）。

✅ `user_card.vue` → `name: 'user_card'` → `<user_card></user_card>`
❌ `UserCard.vue` → `name: 'UserCard'` → `<UserCard></UserCard>`

## 2. JS代码命名规范

组件 `<script>` 中的 JS 代码必须遵循以下命名规范：

| 类型 | 规范 | 示例 |
|:----:|:----:|:----:|
| 类 | 大驼峰（PascalCase） | `class UserManager` |
| 函数/方法 | 小驼峰（camelCase） | `getUserData()`、`computed`、`watch` |
| 常量 | 全大写蛇形（SCREAMING_SNAKE_CASE） | `const API_BASE_URL = '/api'` |
| 变量和参数 | 小写蛇形（snake_case） | `let user_name = 'xxx'`、`this.user_list` |

✅ `let user_name = '张三'`、`this.user_list = []`
❌ `let userName = '张三'`、`this.users = []`

## 3. 数据驱动

禁止直接操作DOM，必须使用Vue的数据驱动方式。

✅ `<input v-model="user_name">`、`:class="{ active: is_active }"`
❌ `document.querySelector('#input').value = 'xxx'`

## 4. 组件拆分

禁止将全部业务逻辑写在一个组件中，必须按功能拆分。

✅ `user_list.vue` + `user_card.vue` + `user_form.vue`
❌ 一个 `user_manage.vue` 包含所有功能

## 5. API调用

所有数据操作必须通过API接口，禁止在前端直接操作数据库。

✅ `axios.get('/api/users').then(res => this.user_list = res.data)`
❌ 前端代码中直接拼接SQL

## 6. 缩进

统一使用2个空格缩进。

✅ 模板、脚本、样式均使用2空格
❌ 使用Tab或4空格

## 方法（Methods）

# Vue开发 - 方法

## 流程概览
```
分析需求 → 初始化项目结构 → 配置构建工具 → 编写Vue组件 → 配置路由 → 配置状态管理 → 封装API接口 → 验证完整性
```

## 步骤1：分析需求
读取需求文档和API设计文档，确定页面结构、组件划分和数据接口。

## 步骤2：初始化Vue项目结构
创建Vue项目目录结构。

## 步骤3：配置构建工具
生成package.json和vite.config.js配置文件。

## 步骤4：编写Vue组件
按功能模块划分组件，编写.vue单文件组件。

## 步骤5：配置路由
配置页面路由和导航守卫。

## 步骤6：配置状态管理
管理全局状态（用户信息、应用配置）。

## 步骤7：封装API接口
封装后端API调用。

## 步骤8：验证完整性
检查组件引用、路由配置、API接口路径。

## 技巧（Tips）

# Vue开发技巧

## 1. 计算属性替代方法

计算属性有缓存，依赖不变时不重新计算，性能更好。

| 维度 | methods方法 | computed计算属性 |
|------|------------|----------------|
| 缓存 | 每次调用都执行 | 依赖不变时不重新计算 |
| 响应式 | 需要手动触发 | 自动追踪依赖 |
| 模板调用 | `{{ formatName() }}` | `{{ formattedName }}` |

## 2. 常见问题

| 问题 | 原因 | 解决 |
|------|------|------|
| 组件未显示 | 未注册或未导入 | 检查components注册和导入路径 |
| 数据修改但视图未更新 | 直接修改了数组/对象 | 使用展开运算符创建新对象 |
| this指向错误 | 回调中丢失上下文 | 使用箭头函数 |
| API跨域 | 前后端域名不一致 | 配置proxy或CORS |