[随手记]VUE组件结构和前端代码规范

本文整理了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项目)编码规范整理

1. 注释
   • 注释一般放在被注释代码上一行。
   • prop，data必须有命名注释，顺序符合逻辑要求。
   • function需要说明注释，参数/返回说明注释，并且内部关键逻辑需要注释。
   • dom多层需要对分块注释。
   • 对代码进行变更修改时，注意修改相应注释及命名，注意注释的描述上下文，避免说明混淆。
2. 代码书写规范
   • 一般情况下不可disable eslint规范。
   • 页面主要目录的文件夹命名为大驼峰，非主要目录的文件夹命名为小驼峰。
   • vue文件命名为大驼峰。
   • 页面内service、mixins的JS文件命名为大驼峰。
   • 公共方法JS文件命名为点+小写命名。
   • 命名注意语义化，一般情况下禁止使用数字等区分度不清晰的命名。
   • 尽量使用英文命名。
   • 一行代码字符数尽量不要太长，注意换行，换行时注意保持上下层级换行方式一致性。
   • 代码嵌套尽量不要太深，通过减少换行来处理代码竖方向太长的问题。
   • templete，script，style标签之间需要多一个换行留空。
3. CSS 规范
   • CSS尽量使用BEM规范。
   • 已统一处理响应式，所有尺寸使用rem，但1px不使用rem直接写1px。
   • 基础文字大小为0.28rem/0.3rem。
   • 因使用主题，所有颜色值尽量使用主题规范中色值，除非不根据主题变化颜色，如遮罩层等。
   • 注意全局污染问题，使用强命名空间或scoped，新建全局样式注意通用问题，尽量不引用样式文件，减少打包体积。
4. 方法设计规范
   • 尽量采用纯函数设计。
   • 尽量减少函数方法耦合性。
   • if / switch 等方法注意处理default情况。
   • 如有通用方法可设计service、mixins。
   • 方法一般情况下需要校验参数。
   • 方法需要处理边界值，调用失败等情况，不可直接抛出异常，即使抛出异常也需要有catch的地方。
5. 组件设计规范
   • 组件必须有name属性，使用大驼峰命名，一般情况下与文件名一致/命名组合一致。
   • name属性后必须多一个换行留空。
   • 采取守护变量、或响应变量两种设计方式，不可混合使用。
   • 注意两种组件设计的使用场景区别。
   • 一般情况下禁止使用Array.index作为key在组件中传递，或作为唯一值渲染。