4.7 KiB
前端项目目录结构
├─api // 对后端接口的封装，要客观反映后端接口(无论目录结构还是命名)
│ ├─Disk // 分类子文件夹
│ │ └─_BaseAxios.js // Base Axios
│ ├─Rbac // 分类子文件夹
│ │ └─_BaseAxios.js // Base Axios
│ ├─_AxiosInterceptors.js // Axios拦截器
│ └─_ResponseHelper.js // 针对服务器返回值的处理方法
├─assets // Vue静态资源
├─biz // 处于api和views之间的一层，用于处理业务，要做到api层只读写数据，views层基本只做界面展示，而且views层不直接调用api层；api层设计决定权在于后端开发，views层设计决定权在于产品经理及UI，biz层设计决定权在于前端开发；方法名一般以add/del/edit/update/get/find开头；传参原则上只有两类，一类是id或id的集合，一类是对象，注意不要把对象拆散了来传参
│ └─Disk // 分类子文件夹(尽量跟views的结构有对应关系，但如果是多个页面共用的biz可以单独归类)
├─components // Vue组件
│ ├─Disk // 分类子文件夹(按大功能模块划分，尽量跟views的结构有对应关系)
│ │ └─Recycle // 分类子子文件夹(按小功能模块划分，尽量跟views的结构有对应关系)
│ ├─Home // 分类子文件夹(按大功能模块划分，尽量跟views的结构有对应关系)
│ └─_Common // 常用Vue组件，在此进行归类，可在其它Vue组件或Vue页面使用
│ ├─Drag // 分类子文件夹
│ └─Tree // 分类子文件夹
├─entity // 对象实体类，由前端定义，不能照搬后端的定义，其new出来的对象，会在biz层和views层之间流转
│ ├─Disk // 分类子文件夹
│ └─Rbac // 分类子文件夹
├─router
│ ├─_index.js // 路由入口文件
│ ├─disk.js // 路由子分类
│ └─user-role-auth.js // 路由子分类
├─scss
│ ├─HomeScreen // scss分类子文件夹
│ ├─_globals.scss // 全局scss，除element ui的重设样式，均在本文件编写或引用；在App.vue中引用本文件
│ ├─_variables.scss // 常用的scss常量；原则上颜色都必须定义在此
│ └─element-ui-reset.scss 对element ui的全局级别重设，以适应UI设计；在App.vue中引用本文件
├─storage // 对localStorage或sessionStorage的操作的封装
│ └─login-info.js // 针对登录的storage封装
├─store // Vuex
├─svgicon // svg图标存放于此
│ └─homescreen
├─sys
│ ├─SysCode.js // 信息码，与后端返回值的code对应
│ └─SysError.js // 错误类
├─util // 常用工具类的封装(先看有没有合适用的，没有再自行实现)
├─views // Vue页面
│ ├─HomeSubViews // 业务类子页面
│ │ ├─Disk // 子页面分类
│ │ └─Rbac // 子页面分类
│ └─SystemViews // 管理类子页面
├─App.vue // 全局样式记在此文件的style标签
├─const.js // 全局常量记在此
├─main.js
编码格式
- 习惯性用 ";" 作为语句结尾
- 单行注释文字前面加一个空格，如：// 注释
- Vue 组件的 props 必须全部写明注释
- Vue 组件的 data 必须至少有 50% 写注释
- Vue 组件的 methods 方法，必须用小驼峰命名法，除了留给父组件调用的方法要用大驼峰命名法
- 事件回调函数的命名，必须以 on 或 handle 开头；而且同一个文件中，只能全用 on 或全用 handle
- 事件名，以 全小写 或 全小写+横杠 命名，如：tree-node-selected，并且不能以 on 或 handle 开头
- 常量名，以 全大写 或 全大写+下划线 命名，如：BASE_URL
- "枚举型"的常量，以 ENUM 开头
- import ... from xxx.yyy，xxx.yyy 必须要写上 .yyy 后缀名，不能省略
- Vue 组件的 name 不要设置，组件名默认就是组件文件的文件名
- 判断是否相等，不用 ==，用 ===
样式规范
- 原则上，所有像素(px)的数值，要么是1，要么是2(极少时候)，要么是4的倍数(即：4px, 8px...16px, 20px...32px 等等)；字体大小可以是14px
- 类名以 全小写 或 全小写+横杠 命名，少用或不用 id
- Vue 组件最外层的 div，类名用组件文件名的 小写 或 小写+横杠命名，如：组件文件名叫 CloudDesktop.vue，则组件最外层的 div 这样写
<div class="cloud-desktop"></div>