👽 概论
昨日和大家分享了脚手架封装的第一步：模板内容的构思。今天就趁热打铁，继续封装脚手架的第二步，定义项目规范。
项目规范大体来说可以包含如下几个方面：一、目录规范；二、代码规范；三、提交规范；在进行这一步时也总是围绕这几部分去展开（别忘了这一步所形成的规范应该是经过团队讨论认可的）。
👽 目录规范
如下目录结构并非绝对，供大家参考：
│ App.vue
│ main.js
│
├─assets --资源目录
│ ├─img --图片目录
│ └─style --公共样式目录
│
├─components --公共组件目录
│ ├─basic --基础功能组件目录
│ │ └─basicButton
│ │ basicButton.vue
│ │ basicButton.less
│ │
│ ├─custom --公共业务组件目录
│ │ └─passDialog
│ │ passDialog.vue
│ │ passDialog.less
│ │
│ ├─layout --全局布局目录
│ │ layout.vue
│ │ layout.less
│ │
│ └─loading --全局loading目录
│ loading.vue
│ loading.less
│ mountLoading.js --loading挂载方法
│
├─config --配置目录
├─router --路由目录
│ router.config.js --子路由
│ router.js --路由实例
│
├─services --请求目录
│ │ request.js --请求实例
│ │
│ └─apis --子模块请求目录
│ home.js --子模块请求实例
│
├─store --状态目录
│ │ store.js --状态实例
│ │
│ └─modules --子模块状态目录
│ home.js --子模块状态实例
│
├─utils --工具函数目录
├─mixins --混入函数目录
└─views --视图目录
├─404
│ 404.less
│ 404.vue
└─home --子视图目录
│ home.less
│ home.vue
└─components --当前视图独享组件
homeHeader.less
homeHeader.vue
👽 代码规范
（1）所有文件夹均采用小驼峰命名；
（2）公共样式单独提取至asets>style文件夹，耦合样式与组件/视图文件相邻；
（3）小图标均使用iconfont格式；
（4）vue文件中的样式所占行数过多时，单独提取为less文件；
（5）子路由单独提取至router.config.js中，方便管理与复用；
（6）store.js中仅允许写入公共state/mutations/actions/getters，各模块状态单独提取至modules中管理；
（7）iconfont推荐使用阿里iconfont，由CDN引入。
此处只是提到了与项目目录耦合性较高的一些开发规范，具体的命名规范没有多说，大家自行定制。顺带提一句，EsLint+Preitter+Stylelint是很好的代码校验、格式化工具，能用则用。具体的配置方法可以参考我之前的文章。
👽 提交规范
目前关于commit的规范很多，大家可以参考Angular团队的commit规范制定符合自己团队的规范，此处不做过多赘述。
