Vue开发规范

文件命名规范

components / layouts

components和layouts下的文件夹名以及.vue文件统一使用大驼峰的形式命名，如SideMenu、SideMenu.vue。

.js / .scss / 图片

所有的.js、.scss和图片文件都使用短横线连接的形式命名，比如init-dialog.js、element-variables.scss、logo-bg.png。

views

views下的文件夹名以及.vue文件统一使用短横线连接的形式命名，比如page-one、page-one.vue。

文件结构规范

components

components下的组件，建议用一个文件夹来承载，形式如下：

|-src
| |-components
| | |-TheHeader
| | | |-index.js
| | | |-TheHeader.vue

• TheHeader/index.js：至少有一个index.js文件，用来暴露组件；

import TheHeader from './TheHeader'
export default TheHeader

• TheHeader/TheHeader.vue：至少有一个TheHeader.vue文件，用来编写组件。

views

views下的路由页面，建议用一个文件夹来承载，形式如下：

|-src
| |-views
| | |-salary
| | | |-components
| | | | |-log.vue
| | | |-bonus.vue
| | | |-config.vue

• components：属于这个页面的组件。

router

|-src
| |-router
| | |-modules
| | | |-index.js
| | | |-org.router.js
| | |-index.js

• modules/org.js：路由模块按功能划分，比如org.router.js中存放关于org模块的路由；
• modules/index.js：实现了modules中路由模块的自动合并，无需手动合并；
• index.js：vue-router的相关配置以及权限设置。

api

|-src
| |-api
| | |-menu
| | | |-index.js
| | |-base.js
| | |-config.js
| | |-index.js
| | |-install.js

• menu/index.js：请求接口模块按照职责功能划分，比如user文件夹中存放关于用户信息的接口export const API_MENU = '/flux/menu'；
• base.js：axios的封装；
• config.js：axios的一些配置和拦截器；
• index.js：暴露所有的api接口；
• install.js：请求方法的全局安装。

使用：

import { API_MENU } from '@/api'

mounted () {
  this.$_get(API_MENU)
}

代码编写规范

• 始终在v-for中使用:key

<!-- Bad -->
<div v-for='product in products'></div>

<!-- Good -->
<div v-for='product in products' :key='product.id'></div>

• 在事件中使用短横线命名

this.$emit('close-window')
<!-- 在父组件中 -->
<popup-window @close-window='handleEvent()' />

• 使用驼峰式声明props，并在模板中使用短横线命名来访问props

<!-- Bad -->
<PopupWindow titleText='hello world' /> 
props: { 'title-text': String }

<!-- Good -->
<PopupWindow title-text='hello world' /> 
props: { titleText: String }

• 不要在同个元素上同时使用v-if和v-for指令

<!-- Bad -->
<div v-for='product in products' v-if='product.price < 500'>

• 大于等于五个attribute元素应该分多行撰写

<!-- Bad -->
<MyComponent foo="a" bar="b" baz="c" hah="d" cdd="f" />

<!-- Good -->
<MyComponent
  foo="a"
  bar="b"
  baz="c"
  hah="d"
  cdd="f"
/>

• 保持指令简写的一致性
• 模板表达式应该只有基本的JS表达式
• 在template中，没有内容的组件，使用自闭合的形式
• 按照Vue官方推荐的组件/实例的选项的顺序来进行编写
• ...

内置了eslint-plugin-vue对代码进行检查，提供了三种不同的校验机制供选择：

1. plugin:vue/recommended
2. plugin:vue/strongly-recommended
3. plugin:vue/essential

所有的配置文件都在.eslintrc.js中，可以按照自己的需求进行配置。

推荐阅读：Vue 官方风格指南

前后端联调规范

前后端联调使用node proxy代理的方式来实现。

Git 规范

分支规范

遵循gitflow的开发方式

代码提交规范

采取angular团队的代码提交规范，使用npm run commit来代替git commit，按照约束一步步填写commit，commit编写完成以后会对commit的格式进行校验，以及对在暂存区的.js/.vue文件进行lint校验。

初始化

模板内置了是否将本地项目初始化为一个git仓库的选项，选择初始化即可

初始化成功以后，依次执行如下命令就能将本地仓库关联到远程仓库：

• git add .
• npm run commit
• git remote add origin https://github.com/xxx/xxx.git
• git push origin master

fly启动项目修改

1、安装依赖 npm install moc-mocui --save
2、将项目中所有@ehr/ease-element 替换为 moc-mocui
3、解决报错：在 package.json 文件中 scripts 下的 lint 内容替换为 eslint --fix --ext .js,.vue src
4、解决报错：在.eslintrc.js 文件中注释掉 extends 中的@vue/standard