本文整理了VUE项目的目录结果，和开发中的部分代码规范，供参阅和交流
VUE 目录结构
pre
.
├── README.md // README.md
├── build // 编译配置目录
├── config // 环境配置目录
├── index.html // index.html
├── node_modules // 依赖模块
├── package.json // 依赖索引目录
├── src
│ ├── App.vue // 页面入口文件
│ ├── assets // 动态资源目录(这里的资源会被webpack编译打包)
│ ├── component // 公共组件目录
│ ├── main.js // js入口文件
│ ├── mock // 开发用模拟接口数据
│ ├── page // 页面
│ │ ├── Home // 页面组件包含的组件目录（页面主目录用大驼峰命名，非主目录驼峰命名）
│ │ │ └── HomeHeader.vue（Vue文件大驼峰命名）
│ │ └── Home.vue // 页面组件
│ ├── router // 路由目录
│ └── store // store目录
└── static // 静态资源目录(这里的资源不会被webpack编译打包)
前端代码(VUE项目)编码规范整理
- 注释
- 注释一般放在被注释代码上一行。
- prop，data必须有命名注释，顺序符合逻辑要求。
- function需要说明注释，参数/返回说明注释，并且内部关键逻辑需要注释。
- dom多层需要对分块注释。
- 对代码进行变更修改时，注意修改相应注释及命名，注意注释的描述上下文，避免说明混淆。
- 代码书写规范
- 一般情况下不可disable eslint规范。
- 页面主要目录的文件夹命名为大驼峰，非主要目录的文件夹命名为小驼峰。
- vue文件命名为大驼峰。
- 页面内service、mixins的JS文件命名为大驼峰。
- 公共方法JS文件命名为点+小写命名。
- 命名注意语义化，一般情况下禁止使用数字等区分度不清晰的命名。
- 尽量使用英文命名。
- 一行代码字符数尽量不要太长，注意换行，换行时注意保持上下层级换行方式一致性。
- 代码嵌套尽量不要太深，通过减少换行来处理代码竖方向太长的问题。
- templete，script，style标签之间需要多一个换行留空。
- CSS 规范
- CSS尽量使用BEM规范。
- 已统一处理响应式，所有尺寸使用rem，但1px不使用rem直接写1px。
- 基础文字大小为0.28rem/0.3rem。
- 因使用主题，所有颜色值尽量使用主题规范中色值，除非不根据主题变化颜色，如遮罩层等。
- 注意全局污染问题，使用强命名空间或scoped，新建全局样式注意通用问题，尽量不引用样式文件，减少打包体积。
- 方法设计规范
- 尽量采用纯函数设计。
- 尽量减少函数方法耦合性。
- if / switch 等方法注意处理default情况。
- 如有通用方法可设计service、mixins。
- 方法一般情况下需要校验参数。
- 方法需要处理边界值，调用失败等情况，不可直接抛出异常，即使抛出异常也需要有catch的地方。
- 组件设计规范
- 组件必须有name属性，使用大驼峰命名，一般情况下与文件名一致/命名组合一致。
- name属性后必须多一个换行留空。
- 采取守护变量、或响应变量两种设计方式，不可混合使用。
- 注意两种组件设计的使用场景区别。
- 一般情况下禁止使用Array.index作为key在组件中传递，或作为唯一值渲染。
