規範類的制定我期望是唯一的…
包括eslint，就不要玩什麼自定義了，統一standard
包括編輯器，就不要sublime、webstorm、 IDEA了，統一vscode
包括editor，就不要說4個空格縮排了，統一縮排2個space
包括mock，因為公司並未使用 Swagger，然後我就不要express router、easyMock了，統一mockjs
…
乾貨吧，話不多說
首先是編輯器vscode
對於vscode，要求安裝以下外掛（不多介紹，有興趣的自行baidu/google）：
1、editorConfig
root = true[*]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lfinsert_final_newline = truetrim_trailing_whitespace = true複製程式碼2、fileheader
"fileheader.Author": "FE.Bolin","fileheader.LastModifiedBy": "FE.Bolin","fileheader.tpl": "/*\r\n * @Author: {author
} \r\n * @Date: {createTime
} \r\n * @Last Modified by: {lastModifiedBy
} \r\n * @Last Modified time: {updateTime
} \r\n */\r\n"複製程式碼3、eslint
讀取專案中.eslinttrc.js檔案，也可以引用一個全域性的
"eslint.autoFixOnSave": true,"eslint.options": {
"configFile": ".eslintrc.js"
},"eslint.validate": [ "javascript", "javascriptreact", {
"language": "html", "autoFix": true
}, {
"language": "vue", "autoFix": true
}]複製程式碼4、Git Lens
5、Git History
提供一份我自己的vscode配置：
{
"files.exclude": {
"**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/tmp": true, "**/node_modules": true, "**/bower_components": true, "**/dist": true, "**/dist_dev": true, "**/dist_test": true, "**/dist_pre": true, "**/dist_cloud": true, "**/.history": true
}, "files.watcherExclude": {
"**/.git/objects/**": true, "**/.git/subtree-cache/**": true, "**/node_modules/**": true, "**/tmp/**": true, "**/bower_components/**": true, "**/dist/**": true, "**/dist_dev/**": true, "**/dist_test/**": true, "**/dist_pre/**": true, "**/dist_cloud/**": true
}, "files.trimTrailingWhitespace": true, "git.enableSmartCommit": true, "fileheader.Author": "FE.Bolin", "fileheader.LastModifiedBy": "FE.Bolin", "fileheader.tpl": "/*\r\n * @Author: {author
} \r\n * @Date: {createTime
} \r\n * @Last Modified by: {lastModifiedBy
} \r\n * @Last Modified time: {updateTime
} \r\n */\r\n", "vetur.format.defaultFormatter.html": "prettier", "eslint.options": {
"configFile": ".eslintrc.js"
}, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", {
"language": "html", "autoFix": true
}, {
"language": "vue", "autoFix": true
} ], "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)", "guides.normal.color.light": "rgba(220, 220, 220, 0.7)", "guides.active.color.dark": "rgba(210, 110, 210, 0.6)", "guides.active.color.light": "rgba(200, 100, 100, 0.7)", "guides.active.style": "dashed", "guides.normal.style": "dashed", "guides.stack.style": "dashed", "editor.renderIndentGuides": false, "gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false, "suppressCommitNotFoundWarning": false, "suppressFileNotUnderSourceControlWarning": false, "suppressGitVersionWarning": false, "suppressLineUncommittedWarning": false, "suppressNoRepositoryWarning": false, "suppressResultsExplorerNotice": false, "suppressShowKeyBindingsNotice": true
}, "explorer.confirmDelete": false, "window.zoomLevel": -1, "files.associations": {
"*.vm": "html", "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript"
}, "gitlens.historyExplorer.enabled": true, "javascript.updateImportsOnFileMove.enabled": "always", "terminal.integrated.rendererType": "dom", "px-to-rem.px-per-rem": 37.5, "px-to-rem.number-of-decimals-digits": 6, "vsicons.dontShowNewVersionMessage": true, "emmet.includeLanguages": {
"wxml": "html"
}, "minapp-vscode.disableAutoConfig": true, "diffEditor.ignoreTrimWhitespace": true, "workbench.statusBar.feedback.visible": false, "gitlens.views.fileHistory.enabled": true, "gitlens.views.lineHistory.enabled": true, "breadcrumbs.enabled": true, "editor.renderWhitespace": "none"
}複製程式碼關於eslint
簡單粗暴的全用eslint standard規範，校驗程式碼也是最嚴格的recommended，編輯器對於eslint的配置上面已經說了，專案中配置eslint這裡也不多描述了，描述下Git Hooks的配合約束eslint程式碼
首先在專案中安裝兩個npm包，
npm i husky lint-staged -D -S複製程式碼然後在package.jsonz增加如下配置：
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},"lint-staged": {
"linters": {
"src/**/*.{js,vue
}": [ "eslint --fix", "git add" ]
}, "ignore": []
}複製程式碼husky的作用就是在本地提交之前做校驗，當然是按eslint規範校驗
lint-staged的作用就是隻校驗你修改的檔案，不做全域性校驗
如上配置，每次它只會在你本地 commit 之前，校驗你提交的內容是否符合你本地配置的 eslint規則。如果不符合就會執行 eslint --fix 嘗試自動修復，修復失敗，則會提示錯誤，手動修復好錯誤後才允許提交程式碼。
關於mockjs
首先安裝npm
npm i mockjs -D -S複製程式碼在src目錄下新建mock資料夾，對應各views模組建立對應的mock資料模組。
所有的 mock 資料都放在 /src/mock 目錄下，它只會攔截 /src/mock/index.js 檔案中攔截的 url。
本地環境開發時，在config/dev.env.js中，定義MOCK屬性：
module.exports = {
NODE_ENV: '"development"', ENV_CONFIG: '"dev"', NPM_CONFIG_REPORT: 'false', BASE_API: '"https://dev.example.com/"', MOCK: 'true'
}複製程式碼在src/main.js中引入mock
process.env.MOCK &
&
require('./mock')複製程式碼我是如何做到開發/生產環境切換、僅部分介面mock攔截的呢？
首先mock攔截是正則匹配url，那麼我們在url和http請求攔截處做處理：
import Mock from 'mockjs'import exampleApi from './example'// exampleconst reg_example = /\/example\/list\/isMock/Mock.mock(reg_example, 'post', exampleApi.list)export default Mock複製程式碼我在mock的url上加上isMock，然後在請求時提供引數isMock: true/false
import {
axiosFetch
} from '@/utils/axios'export const exampleApi = {
requestPath: 'example/list', isMock: true, list (params = {
}) {
return axiosFetch(this.requestPath, params, {
isMock: this.isMock
})
}
}複製程式碼最後，在請求攔截器裡做process.env.MOCK &的雙重判斷，並改寫
&
config.isMockurl
/* request攔截器 */service.interceptors.request.use(config =>
{
... // 處理mock if (process.env.MOCK &
&
config.isMock) {
config.url = `${config.url
}/'isMock'
}`
} return config
}, error =>
{
Promise.reject(error)
})複製程式碼就這樣，通過環境變數、請求配置、請求攔截器三者配合實現~
關於Git
為了保證master的優雅一條線，功能分支必須合併commit後，才能rebase/merge到master