README
项目规范说明
项目采用vue@3全家桶，element-plus，scss ，axios，lodash，echarts，vue3-perfect-scrollbar等主体技术进行开发 项目要求组件化开发，结构化，清晰化项目结构。 请遵循代码中所定义的规范进行开发
项目目录说明
├── package-lock.json
├── package.json
├── public # 静态目录
│ ├── favicon.ico
│ └── index.html
├── README.md # 目录说明
├── src # 源码目录
│ ├── api # 全局接口
│ │ ├── http.config.ts # 接口配置
│ │ └── index.ts # 接口入口
│ ├── App.vue # 全局入口组件
│ ├── assets # 静态目录
│ ├── components # 组件目录
│ ├── main.ts # 文件入口
│ ├── router # 路由管理
│ ├── store # vuex 储存库
│ │ ├── index.ts # 储存库入口
│ │ └── types.ts # 常量
│ ├── style # 全局样式(不需要引入, 全局生效)
│ │ ├── class.scss # 全局类名
│ │ ├── index.scss # 入口文件
│ │ ├── mixin.scss # scss 集合
│ │ └── variables.scss # 样式变量
│ ├── types # 类型说明
│ │ ├── declares # 项目依赖说明
│ │ ├── custom.d.ts # 自定义类型
│ │ └── request.d.ts # 请求类型说明
│ ├── utils # 工具模块
│ └── views # 视图组件(路由)
│ ├── About.vue
│ └── ...
├── tsconfig.json # ts 文件配置
└── vite.config.ts # vue 脚手架配置
CSS 预编辑器规范
- 所有主题色号不允许在单独页面/组件使用，只允许使用src/style/variables中定义的变量。
- 避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现。
- 少用#，少用*，少用标签选择器
- 尽量避免使用 !important
CSS 属性书写顺序
- 建议遵循以下顺序
- 布局定位属性：
display / position / float / clear / visibility / overflow - 自身属性：
width / height / margin / padding / border / background - 文本属性：
color / font / text-decoration / text-align / vertical-align / white- space / break-word - 其他属性（CSS3）：
content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
class 标签命名
- 尽量采用-分开关键字命名
- 英文单词尽量不要缩写
js 规范
- 采用模块化编程，通过
ES6语法暴露-> export - 重复代码进行封装为方法，减少代码臃肿，让代码清晰明了
- 减少代码圈复杂度，减少代码嵌套，善于
return，少用else - 函数与变量命名采用驼峰命名法
-> userInfo or getUserInfo - 常量(不会再次进行修改)命名采用大写加下划线命名
-> USER_STATUS
vuex 规范
# 规范定义mutations-type常量命名
# 常量前缀采用动词, 后缀为对应的数据名称
- export const RECEIVE_[DATA_NAME] = 'receive_[data_name]' -> 接收并覆盖某个数据
- export const MODIFY_[DATA_NAME] = 'modify_[data_name]' -> 修改某个数据或数据项
- export const DELETE_[DATA_NAME] = 'delete_[data_name]' -> 删除某个数据或数据项
- export const UNSHIFT_[DATA_NAME_ITEM] = 'unshift_[data_name_item]' -> 向某个数据前端添加一项数据
- export const PUSH_[DATA_NAME_ITEM] = 'push_[data_name_item]' -> 向某个数据后端添加一项数据
项目构建命令清单
# 开发时构建
npm dev
# 打包构建
npm build