1.開發(fā)規(guī)范

1. 編碼規(guī)范考榨，英文版地址
2. 遵循vue風(fēng)格指南
3. 完全了解業(yè)務(wù)的前提下再進(jìn)行開發(fā)
4. 開發(fā)前編寫開發(fā)文檔瑟慈，開發(fā)中嚴(yán)格遵循開發(fā)文檔要求
5. 統(tǒng)一采用Eslint規(guī)范代碼風(fēng)格
6. 將面向?qū)ο笏枷肴烈选⒃O(shè)計模式貫穿到開發(fā)中
7. 常用組件要進(jìn)行封裝

1.1插件使用規(guī)范

1. 不要引入不必要的插件
2. 確實需要引入時，考慮按需引入
3. 盡量不要使用JQuery等需要操作DOM來在更新狀態(tài)的插件
4. 使用vuex狀態(tài)管理時需要考慮必要性：不要為了使用vuex而使用vuex
5. 盡量不要自己造輪子

1.2.組件使用規(guī)范

字體

統(tǒng)一使用微軟雅黑

Icon

優(yōu)先使用字體圖標(biāo)曹体，（不能滿足需求時扳缕，采用切圖）

image

1. 考慮是否需要增加onerror狀態(tài)下的顯示狀態(tài)
2. 考慮適配問題

顏色

考慮是否需要在選中，激活狀態(tài)下增加區(qū)分效果

Button

1. 有查詢等網(wǎng)絡(luò)請求操作時举畸，使用disabled屬性查排，避免重復(fù)點(diǎn)擊
2. 根據(jù)用戶習(xí)慣，彈窗footer中“確定”按鈕在“取消”左側(cè)
3. 考慮是否需要增加必要的圖標(biāo)抄沮，使按鈕更形象

Input輸入框

1. 類型限制跋核，（數(shù)字類型（只允許輸入數(shù)字）、金額類型（小數(shù)位控制））
2. 長度限制
3. 是否需要 clearable
4. 是否需要自動獲取焦點(diǎn)（包含其他操作結(jié)束后叛买，焦點(diǎn)會自動回到輸入框）
5. 是否需要選中并覆蓋輸入框中的值
6. 是否需要表單驗證砂代、正則驗證
7. 多個輸入框，是否需要支持率挣，通過鍵盤操作焦點(diǎn)上下左右切換
8. 是否需要支持鍵盤操作泊藕，比如：Enter鍵，作為確認(rèn)操作
9. 綁定model是否需要增加修飾符（trim、number）限制
   ★★★★★ 除了登錄時候需要記住密碼娃圆，其他情況禁止出現(xiàn)保存密碼或者更新密碼彈窗玫锋，非密碼類型輸入框禁止被自動填充。

Select 選擇器

1. 只有一個候選項時讼呢，直接展示到選項中
2. 考慮是否需要支持clearable
3. 有查詢等網(wǎng)絡(luò)請求操作時撩鹿，使用disabled屬性，禁止操作

Table表格

1. 數(shù)字類（數(shù)量悦屏、比例）节沦、金額類的，均居右展示
2. 表格中文字較長的础爬，hover時提示文字顯示全

選擇器 （時間甫贯、日期選擇器）

1. 考慮是否需要禁止輸入
2. 考慮是否需要clearable

Dialog

1. 增加寬度高度限制，支持不同分別率
2. 考慮是否會影響父布局
3. 考慮什么時候進(jìn)行關(guān)閉（點(diǎn)遮罩層看蚜、鍵盤ESC）
4. 異常狀態(tài)下叫搁，彈窗是否會自動關(guān)閉

提示

1. 給與必要的提示
2. 提示的正確性、嚴(yán)謹(jǐn)性（不要有錯別字供炎，要易于理解）
3. 尊重用戶習(xí)慣渴逻，比如：彈窗footer左側(cè)確定、右側(cè)取消（關(guān)閉）

tab

關(guān)閉頁簽時候音诫，是否需要提示（增強(qiáng)嚴(yán)謹(jǐn)性）

NavMenu 導(dǎo)航菜單

Carousel 走馬燈

1. 考慮只有一個輪播頁面時候的展示形式
2. 考慮輪播上的事件與輪播是否對應(yīng)

Backtop 回到頂部

根據(jù)實際情況惨奕，考慮是否需要回到頂部或指定位置

Affix

根據(jù)實際情況，確定是否需要吸附效果竭钝，并且考慮兼容性問題

2.項目打包配置

• 打包后的項目梨撞，禁止在控制臺輸出調(diào)試信息，可以統(tǒng)一使用插件terser-webpack-plugin
• 代碼打包壓縮香罐，可以統(tǒng)一使用插件 compression-webpack-plugin
  后臺需要開啟gzip

3.常見問題

3.1 頁面緩存問題

根據(jù)實際項目需要卧波，確定是否需要緩存頁面數(shù)據(jù)。對于多頁簽頁面穴吹，一般需要緩存每個頁面的數(shù)據(jù)幽勒。

3.2 vue項目緩存問題

1.index.html中禁止緩存

    <meta   http-equiv="Expires"   CONTENT="0">
    <meta   http-equiv="Cache-Control"   CONTENT="no-cache">
    <meta   http-equiv="Pragma"   CONTENT="no-cache">

2.引入的靜態(tài)js后加時間戳

 <script src="/static/api.js?v=<%= new Date().getTime() %>"></script>

3.提示用戶嗜侮，版本更新港令，自己退出重新登錄（沒有辦法的辦法）,進(jìn)行刷新。獲取最新項目

this.$router.replace({path: `/login?v=${new Date().getTime()}`})
location.replace(location.href)

4.nginx中進(jìn)行配置

expires -1s;
add_header Cache-Control no-cache;
add_header Cache-Control private;

3.3 其他問題

• 瀏覽器兼容問題锈颗，對應(yīng)支持es語法的瀏覽器顷霹，需要特別關(guān)注IE11樣式、功能是否有異常

4.其他

4.1插件推薦

• 導(dǎo)出excel
• Lodop打印插件如何在vue項目中使用lodop打印插件
• 百度Echarts Echarts
• 富文本編輯器 vue-quill-editor wangEditor

4.2源碼學(xué)習(xí)

• vue源碼學(xué)習(xí)
• axios源碼學(xué)習(xí)