文件命名規(guī)范

components / layouts

components和layouts下的文件夾名以及.vue文件統(tǒng)一使用大駝峰的形式命名，如SideMenu、SideMenu.vue。

.js / .scss / 圖片

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

views

views下的文件夾名以及.vue文件統(tǒng)一使用短橫線連接的形式命名，比如page-one、page-one.vue。

文件結構規(guī)范

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：實現(xiàn)了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)
}

代碼編寫規(guī)范

• 始終在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中，沒有內(nèi)容的組件，使用自閉合的形式
• 按照Vue官方推薦的組件/實例的選項的順序來進行編寫
• ...

內(nèi)置了eslint-plugin-vue對代碼進行檢查，提供了三種不同的校驗機制供選擇：

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

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

推薦閱讀：Vue 官方風格指南

前后端聯(lián)調(diào)規(guī)范

前后端聯(lián)調(diào)使用node proxy代理的方式來實現(xiàn)。

Git 規(guī)范

分支規(guī)范

遵循gitflow的開發(fā)方式

代碼提交規(guī)范

采取angular團隊的代碼提交規(guī)范，使用npm run commit來代替git commit，按照約束一步步填寫commit，commit編寫完成以后會對commit的格式進行校驗，以及對在暫存區(qū)的.js/.vue文件進行lint校驗。

初始化

模板內(nèi)置了是否將本地項目初始化為一個git倉庫的選項，選擇初始化即可

初始化成功以后，依次執(zhí)行如下命令就能將本地倉庫關聯(lián)到遠程倉庫：

• 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 內(nèi)容替換為 eslint --fix --ext .js,.vue src
4、解決報錯：在.eslintrc.js 文件中注釋掉 extends 中的@vue/standard