一、開發環境篇
我們首先推薦vs code作為開發環境，因為其友好的開發界面和強大的擴展庫是我們快速的進行代碼開發的必要支撐。 在vs code中開發vue項目，有一些插件是必要裝的，結合我個人的一些經驗，以下插件和配置推薦給大家：
1.Vetur
vue開發必裝的一款插件，幫你規范vue的語法、高亮代碼等眾多功能。
2.Eslint
vue代碼規范檢查，可以自定義規則，在編譯代碼時自動檢查語法，報出提醒。
3.Prettier
代碼格式化插件，安裝后，請在首選項>設置中打開format on save的選項，在每次保存代碼時自動格式化代碼。如果無效，請用Alt+Shift+F，這時應該會在最底部有一個消息顯示目前格式化的插件有沖突，讓你選擇其中一個，選完就正常可以用了。
4.Bracket Pair Colorizer 2
一個可以將代碼塊括號，如{} [] ()等進行同顏色標注的插件，幫你快速找到下一個括號。
5.Git History
如果你司用git來管理代碼的話，這個插件推薦安裝，他擴展了“源代碼管理”面板中的git功能，可以查看git樹和快速提交代碼。
6.GitLens
git環境再加這一個gitlens就更牛x了，可以快速查看每一行代碼的版本信息，誰用誰爽。
二、項目目錄篇
vue-cli的目錄相信大家已經十分熟悉，我司結合自身的項目的需要和參考了vue-cli的目錄結構，固定了以下的更合理的目錄結構：
├── babel.config.js 相關配置及規范見官網 https://cli.vuejs.org/zh/config/#babel
├── dist 生成打包后文件
├── node_modules 安裝的依賴包
├── package-lock.json npm包配置文件、依賴包小版本信息
├── package.json npm包配置文件、依賴包信息
├── public public中的表態資源會被復制到輸出目錄(dist)中
├── src
│ ├── App.vue 路由組件的頂層路由
│ ├── assets 放置一些靜態資源，例如圖片，圖標，字體
│ ├── components 公共組件
│ ├── main.js Vue 入口文件
│ ├── router vue-router 相關配置
│ ├── store vuex 相關配置
│ │ ├── actions.js 全局vuex actions 方法
│ │ ├── mutations.js 全局vuex mutations方法
│ │ └── index.js 導出vuex所有配置
│ ├── tools 自定義的工具類
│ └── views 所有的路由組件
└── vue.config.js 相關配置及規范見官網 https://cli.vuejs.org/zh/config/#vue-config-js
三、組件篇
1.組件開發需要全面的收集需求，深刻分析此組件可以覆蓋的業務范圍，並作出正確的取舍。
2.一個組件不可能是大而全的，但可以是層層擴展的，從一個基礎組件，一層層的擴展成更復雜的組件，甚至超大型的組件。
3.組件的props、method、events需要遵守同樣的命名規范，如獲取值用getXXX,設置值用setXXX，創建用createXXX等，這些可以快速的幫助使用者找到需要的接口。
4.組件需要添加name，在設置keep-alive時需要用到。
5.組件頭部應該添加組件的說明注釋，如接收的傳入參數、向外層拋出的事件名等。
6.props定義應該盡量詳細，包括type、default、required、甚至validator
7.樣式應該設置scoped，避免污染全局樣式。
四、命名規范篇
1.css命名規范
1.css class命名盡量使用英語，不要使用漢拼，並且有意義，
2.使用單詞命名時不要縮寫，除非非常有名的單詞。
3.- 規則命名中，一律采用小寫加中划線的方式，不允許使用大寫字母或 _ 例如（header-list）
4.不允許通過1、2、3等序號進行命名
5.避免class與id重名
css編寫順序
1.位置，定位，層級（position，top，bottom，left，right，z-index，display，float）
2.大小（width，height，padding，margin）
3.文字系列（font, line-height, letter-spacing, color- text-align）
4.背景（background，border）
5.其他（animation，transition）
2.javascript規范（基於ES6 結合eslint 強制編碼格式）
1.變量命名采用小駝峰命名法---即首字母小寫，后每個單詞首字母大寫
2.常量命名采用全字母大寫命名，以便於與變量區分
常量 const PI = 3.141592653 變量 let name = ''
3.函數命名使用小駝峰命名法，條件允許情況下請采用動詞前綴方式，請保證函數命名語義化明確
4.構造函數命名必須采用大駝峰命名法，即首字母必須大寫
5.單行注釋
// 這是名稱
let name = 'wsl'
6.多行注釋
/**
* 這是名稱
* 縮寫
*/
let name = 'wsl'
7.函數注釋
函數注釋也是多行注釋的一種，但要求提供函數功能說明，作者信息，參數說明(若有參數)，以及返回值(若有 返回值)說明
/**
* @desc 用於計算兩數之和
* @author wsl
* @param {Number} x 數字，用於加法計算
* @param {Number} y 數字，用於加法計算
* @return {Number} result 用於保存計算后的結果
*/
function add(x, y) {
let result = x + y;
return result;
};
8.推薦使用對象直接創建對象，而非構造器創建
9.字符串拼接推薦使用ES6中``拼接
10.判斷
比較運算符,推薦使用 '=' 與 '!'
if 推薦不要簡寫，判斷 非空時 “!變量”需要考慮變量不為數值0
11.循環
若循環中需使用函數，請將函數定義在循環外部而非內部，這樣可以避免函數的反復創建
3.組件命名規范
1.組件名應該始終是多個單詞組合的，一些vue內置組件除外，如App、component、transition等。
2.相關聯組件的命名最好是有共同部分的，如TodoList.vue,TodoItem.vue
components/
|- TodoList.vue
|- TodoItem.vue
3.組件的文件名要么是始終單詞大寫開頭，要么始終橫線連接
components/
|- MyComponent.vue
components/
|- my-component.vue
4.特定和基礎組件，應該以一個特定的前綴開頭，比如Base、App等
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
5.組件的命名應該使用完整單詞，而不是縮寫
//反例
components/
|- BtnAdd.vue
|- UName.vue
//推薦
components/
|- ButtonAdd.vue
|- UserName.vue
四、常用變量限制及驗證
1.名稱字數限制 （推薦1-20）
2.手機號，電話，郵箱驗證（通用驗證）
3. 上傳附件
圖片：若無特殊要求，格式限制jpg、png、jpeg、gif ，大小限制 5M以下
視頻：若無特殊要求，格式限制mp4、MPEG4
五、頁面顯示及功能交互通用
1.文字超出容器需要進行 '...' 省略
2.圖片顯示 無特殊要求時，按原圖寬高比顯示
3.美化滾動條
4.涉及數據處理功能按鈕，增加防頻繁點擊處理
六、使用開發環境及相關附屬第三方（PC端）
1.vuecli3.0以上 vue 全家桶 文檔：https://cli.vuejs.org/zh/guide/
2.element-ui UI 文檔：https://element.eleme.cn/#/zh-CN
3.axios 請求 文檔：http://www.axios-js.com/zh-cn/docs/index.html
4.vue-quill-editor 富文本，無特殊要求時 文檔：https://github.surmon.me/vue-quill-editor/
5.echarts 統計圖表 文檔：https://echarts.apache.org/zh/index.html
6.vue-amap 地圖 （高德）無特殊要求時 文檔：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
七、基於RBAC權限
1.根據角色動態獲取菜單，數據及功能按鈕權限
八、服務部署配合
1.動態部署開發，生產環境 (前后端分離)
生產環境：nginx
開發環境：vue.config.js 設置本地代理
2. 動態部署開發，生產環境 （不分離）
public下index.html 以緩存方式設置配置項
九、其他
1.v-for需要設置key值，但不建議用index作為key
2.v-for不要和v-if一起使用。如果一定要用v-if, 則在外層用包一層,在元素上再使用v-if。