vue前端代碼開發規范

開發工具使用

1. 建議使用統一開發工具vscode
2. vscode 使用插件建議 
   
   • Bracket Pair Colorizer => 彩虹括號，不同嵌套級別的括號不同的顏色
   • GitLens => git工具
   • Past and Indent => 粘帖代碼正確縮進修正
   • vetur => vue 插件
3. 使用統一縮進，以tab縮進，一個tab大小為2個空格

html代碼編寫規范

1. 使用語義化標簽如section footer header 進行布局頁面結構
2. 使用標准html5文檔類型聲明
3. 使用utf-8 編碼 <meta charset="utf-8">
4. 盡量使用比較少的標簽

標簽使用

1. 使用盡量貼合語意，如，布局容器使用div，段落使用p。數據列表使用ul/ol/dd等，關鍵字使用strong，標題使用h1~h6，圖標使用 i；

class命名規范

1. 參與到ui交互的class使用前綴js-的命名規則，與定義樣式的class區別開
2. 參與布局的class使用前綴ly- （layout簡稱）
3. 全局class使用前綴g-
4. 對頁面和組件統一命名，如頁面需要添加class=”page-頁面名” 組件添加class=”component-組件名”進行區分
5. 取名盡量貼合語意 （使用翻譯軟件翻譯下）
6. 頁面須有一個私有的class選擇器空間 scoped

樣式編寫規范

1. 布局以流式布局為主，禁止濫用絕對定位，只在有必要的時候才使用絕對定位
2. 樣式書寫區分全局樣式，布局樣式，單元樣式，頁面私有樣式，
3. 頁面私有樣式應寫在頁面scoped 私有class下面
4. 單元樣式的選擇器不許包含頁面私有的class及布局class，以便於單元樣式的復用
5. 裝飾性的背景圖盡量寫在樣式里，源於風格樣式和內容區分的思想
6. 建議使用預處理樣式 stylus 或scss,建立基礎預定義樣式文件: 
   
   • reset//樣式重置
   • variables//變量文件，包括如color，btn size，風格相關的顏色、尺寸應定義在variables 里面，便於定義與切換風格
   • mixins//混合樣式定義
   • index//全局樣式定義 
      公有樣式文件 public.styl 依次引用 reset.styl variables.styl mixins.styl global.styl
7. 統一定義字體大小如： medium normal large small mini 類，全局統一定義字體大小（大多數地方）
8. 圖標建議統一使用字體文件或者SVG文件
9. 如非必要，不讓選擇器深度超過3層

IE 兼容模式

1. 優先使用最新版本的IE 和 Chrome 內核

　　　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

移動端樣式書寫規范

1. 盡可能使用以屏幕寬度為參照的等比例布局 以js根據屏幕寬度動態計算根元素font-size 變換 rem 與 px 換算比例，做到等比縮放
2. 定義 viewport 為移動端設備優化，設置可見區域的寬度和初始縮放比例,禁止用戶手動縮放

　　<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

js代碼編寫規范

1. 函數/方法，要添加功能注釋
2. 函數/方法要保持功能單一，一個方法只做一件事情，復雜的功能要進行拆分
3. 來自於接口返回的數據，和來自於本地存儲的數據使用之前要做容錯處理，保證程序健壯性
4. 該用switch 的時候用switch，濫用if/else會使程序的可讀性變差
5. 在一票否決的情況下，可以采用寫法如if(x)return 減少代碼塊嵌套深度

vue項目規范

1. 組件私有樣式要添加scoped作用域屬性，或用當前組件的唯一class 名包裹，公共樣式應寫在公共樣式文件里面
2. 布局應抽離到單獨的布局文件中 ，做到頁面內容和布局的代碼分開到不同的文件里面
3. 一個項目中 stylus less sass 只允許使用一種，建議使用stylus

vue 項目目錄結構規范

src 

|—— api 接口定義目錄 （http.js定義axios封裝和公共路徑配置；api.js定義每個接口）
|—— assets 靜態文件目錄 

|—— components 公共組件目錄 （可將查詢，表格，分頁或者布局類的組件封裝為公共組件）
|—— const 常量目錄 （filter.js過濾器、固定不經常改的常量制作）
|—— pages/views 頁面目錄
|—— plugins 第三方插件目錄
|—— router 路由定義目錄
|—— store vuex 狀態管理定義目錄
|—— styles 樣式目錄 scss|sass|stylus 預處理方式

　　|——icons.scss   圖標樣式
　　|——index.scss   入口樣式文件
　　|——reset.scss   重置所有標簽
　　|——resetModel.scss   重置ele模態框
　　|——resetMessage.scss   重置ele消息框
　　|——resetTable.scss   重置ele表格
　　|——resetPagination.scss   重置ele分頁
　　|——variable.scss   重置ele主題變量
　　|——mixins.scss   重置elemixins變量
　　等等，根據需求再添加新的
|—— utils 工具庫目錄 （時間日期處理方法datetime.js；以及其他的制作為一個文件）