Commit b3ba8573 by liangjianmin

更新编码规范和开发工作流文档,简化前端代码规范,添加环境启动和构建部署说明,优化项目访问和代理配置。

parent bf34c0e5
# 芯链云系统编码规范
---
globs: *.vue,*.js
description: 前端代码规范和约定
---
## JavaScript 代码规范
- **变量声明**: 统一使用 `var` 声明变量,禁止使用 `const` 和 `let`
- **命名规范**: 使用驼峰命名法,命名要清晰有意义
- **ES6+ 特性**: 优先使用箭头函数、模板字符串、解构赋值等现代语法
- **代码简洁性**: 遵循 KISS 原则,避免过度抽象和不必要的嵌套
# 前端代码规范
## JavaScript 规范
- 使用 ES6+ 特性:箭头函数、模板字符串、解构赋值
- **变量声明**: 统一使用 `var`,禁止使用 `let/const`
- 函数命名使用驼峰命名法
- 函数保持短小,逻辑清晰,避免多层嵌套
## Vue 组件规范
- **组件导入**: Element UI 组件按需导入,避免全量引入
- **生命周期**: 使用 `created()` 进行数据初始化
- **数据绑定**: 使用 `v-model` 进行双向绑定
- **事件处理**: 方法名使用动词开头,如 `getData()`, `handleClick()`
- 组件文件使用 PascalCase 命名
- 保持与现有文件的缩进、引号、分号风格一致
- 每段关键逻辑必须有简洁注释
## 样式规范
- **预处理器**: 使用 Less 编写样式
- **类命名**: 使用 BEM 命名规范或语义化命名
- **响应式**: 使用 Flex 布局,提供 `.row`, `.column`, `.rowCenter`, `.verCenter` 等工具类
## API 请求规范
- **统一封装**: 使用 `this.$http(method, url, param)` 进行请求
- **错误处理**: 统一在拦截器中处理错误和 loading 状态
- **Token 管理**: 使用 `Util.getCookie('token')` 获取认证信息
## 注释规范
- **函数注释**: 每个函数必须包含功能说明
- **复杂逻辑**: 关键业务逻辑必须添加注释
- **TODO标记**: 使用 `// TODO:` 标记待完成功能
## 性能要求
- **响应时间**: 目标响应时间 ≤ 5000ms
- **资源优化**: 合理使用 keep-alive 缓存组件
- **按需加载**: 路由和组件支持懒加载
## 示例代码风格
```javascript
// 正确的变量声明和函数定义
var tableData = [];
var dialogVisible = false;
// 使用箭头函数和模板字符串
var handleSuccess = (response) => {
this.$message({
message: `操作成功,共处理 ${response.data.count} 条数据`,
type: 'success'
});
};
- 使用 Less 预处理器
- 样式文件组织按模块划分 ([src/assets/css/](mdc:src/assets/css/))
// 按需导入 Element UI 组件
import {Button, Dialog, Form, FormItem, Input, Message, Table, TableColumn} from 'element-ui';
Vue.use(Button).use(Dialog).use(Form).use(FormItem).use(Input).use(Table).use(TableColumn);
```
## 开发原则
- 严格遵循 KISS 原则,代码极致简洁
- 仅专注前端实现,不涉及后端代码修改
- 优先编辑现有文件,避免创建新文件
\ No newline at end of file
# 开发工作流程
---
description: 开发工作流和常用命令
---
## 项目启动
# 开发工作流
## 环境启动
```bash
# 安装依赖
npm install
# 确保使用正确的 Node.js 版本
nvm use 16.20.2
# 开发环境启动
# 启动开发服务器
npm run dev
```
## 构建部署
```bash
# 测试环境构建
npm run build-test
# 生产环境构建
# 生产环境构建
npm run build
```
## 开发环境配置
- **开发服务器**: 端口 8080
- **代理配置**: 自动代理 `/auth` 和 `/api` 请求
- **热重载**: 支持代码修改后自动刷新
- **ESLint**: 已关闭 (`lintOnSave: false`)
## 文件组织规范
- **页面组件**: 放在 `src/views/` 下按业务模块分类
- **公共组件**: 放在 `src/components/` 下
- **工具函数**: 放在 `src/tool/` 下
- **样式文件**: 按模块放在 `src/assets/css/` 下
- **静态资源**: 放在 `public/` 目录
## 版本控制
- **分支命名**: `feature/模块名/日期_功能描述`
- **提交信息**: 使用中文描述,格式清晰
- **代码审查**: 重要功能需要代码审查
## 调试技巧
- **Vue DevTools**: 使用浏览器扩展调试 Vue 组件
- **网络请求**: 在浏览器开发者工具中查看 API 请求
- **控制台日志**: 使用 `console.log` 进行调试
- **断点调试**: 在关键代码处设置断点
## 性能优化
- **组件缓存**: 使用 `keep-alive` 缓存不需要重新渲染的组件
- **路由懒加载**: 大型组件使用动态导入
- **图片优化**: 压缩图片资源,使用适当格式
- **代码分割**: 合理使用 webpack 的代码分割功能
## 部署流程
1. **本地测试**: 确保功能正常
2. **构建打包**: 运行 `npm run build`
3. **文件上传**: 将 `view/` 目录上传到服务器
4. **环境验证**: 在目标环境验证功能
5. **回滚准备**: 保留上一版本以便回滚
## 常见问题解决
- **跨域问题**: 在 `vue.config.js` 中配置代理
- **路由问题**: 检查路由配置和权限设置
- **样式问题**: 确认 Less 编译和 CSS 作用域
- **API 问题**: 检查请求参数和响应格式
## 项目访问
- 本地开发: http://localhost:8080/
- 网络访问: http://192.168.1.19:8080/
## 开发工具推荐
- **IDE**: VS Code 或 WebStorm
- **浏览器**: Chrome 或 Firefox(支持 Vue DevTools)
- **接口测试**: Postman 或 Insomnia
- **版本控制**: Git + 可视化工具
## 代理配置
开发环境代理到: http://cloud.liexindev.net
- `/auth` 路径代理认证接口
- `/api` 路径代理业务接口
## 代码质量保证
- **代码规范**: 遵循项目编码规范
- **功能测试**: 新功能必须经过完整测试
- **兼容性**: 确保主流浏览器兼容性
- **性能监控**: 关注页面加载速度和响应时间
## 构建输出
- 构建目录: `view/`
- 静态资源: `view/static/`
- 带时间戳的文件名,避免缓存问题
\ No newline at end of file
---
alwaysApply: true
description: Node.js版本兼容性和环境配置
---
# Node.js 版本兼容性规则
## 项目环境要求
- **Node.js 版本**: 使用 v16.20.2 (记录在 [.nvmrc](mdc:.nvmrc))
- **原因**: Vue CLI 4.5.x 与 Node.js v18+ 的 OpenSSL 3.0 不兼容
- **错误表现**: `error:0308010C:digital envelope routines::unsupported`
## 环境管理
使用 nvm 管理 Node.js 版本:
```bash
nvm use 16.20.2
```
## 重要提醒
- 不要随意升级 Node.js 到 v17+ 版本
- 保持 [package.json](mdc:package.json) 中的启动命令简洁,不添加环境变量
- 如需在新环境部署,确保使用 Node.js v16.x 版本
\ No newline at end of file
---
alwaysApply: true
description: Vue项目结构和开发规范
---
# 芯链系统项目结构
## 技术栈
- Vue 2.6.11 + Element UI 2.15.13
- Vue Router 3.2.0
- Axios 0.21.1
- Less 样式预处理器
## 项目结构
- 入口文件: [src/main.js](mdc:src/main.js)
- 路由配置: [src/router/index.js](mdc:src/router/index.js)
- 组件目录: [src/components/](mdc:src/components/)
- 页面目录: [src/views/](mdc:src/views/)
- 样式资源: [src/assets/css/](mdc:src/assets/css/)
## 主要业务模块
- 用户管理: [src/views/User/](mdc:src/views/User/)
- 商品管理: [src/views/Goods/](mdc:src/views/Goods/)
- 门店管理: [src/views/Store/](mdc:src/views/Store/)
- 寄售管理: [src/views/consignmentManagement/](mdc:src/views/consignmentManagement/)
- 账单管理: [src/views/billManagement/](mdc:src/views/billManagement/)
## 开发配置
- 开发端口: 8080
- 代理配置在 [vue.config.js](mdc:vue.config.js)
- 关闭了 ESLint 检查 (`lintOnSave: false`)
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment