vue開發規範

背景

因爲saas平臺即將開始，如今從新梳理前端架構和開發規範，項目使用模塊化思想搭建，每一個模塊都有本身都路由和方法，儘可能作到刪除和添加模塊，不會對框架產生較大對影響。

技術棧

本次項目繼續沿用vue框架和element-ui，以及其它一些插件。
主要：

vue 2.5.0
webapck 4.0.0
element-ui
vuex
axios

本次項目使用腳手架vue-cli 3.0 版本，webpack也基於4.0做爲基礎框架開發，配置變更比較大，可是相比3.0簡潔明瞭了許多。

項目結構

├─ public 公共資源
├─ src
│  ├─ api 公共api
│  ├─ assets 資源
│  ├─ └─ styles 全局樣式
│  ├─ components 公共組件
│  ├─ layout 佈局
│  ├─ mock 模擬數據
│  ├─ modular 項目模塊
│  │  ├─ home 
│  │  ├─└─ api 模塊api
│  │  ├─└─ pages 模塊頁面
│  │  ├─└─ router 模塊路由
│  ├─ plugin 插件
│  ├─ router 公共路由
│  ├─ store 全局狀態
│  ├─ utils 公共方法
│  ├─ App.vue 主視圖
│  ├─ main.js 主程
│  └─ setting.js 設置
├─ static 靜態資源
├─ .browserslistrc
├─ .eslintrc.js
├─ .gitignore
├─ babel.config.js
├─ package.json
├─ README.md
└─ vue.config.js 配置文件
├─ yarn.lock

開發規範

1.語義化命名

• 使用駝峯式命名，文件命名不宜過長，路由的命名和文件命名保持一致。

2.文件目錄規範

• 不宜嵌套過多層文件，且不一樣模塊相同文件名應保持一致，區分大小寫。

3.路由

• 用戶管理下有增改兩個功能，不使用彈框去作的前提下，假如說 add 和 update 對應兩個路由是 /addUser，/updateUser。咱們系統地址欄是這樣顯示的：

  // 增長用戶
  localhost:3030/addUser
  // 修改用戶
  localhost:3030/updateUser?id=1

  可是模塊多的話，就不容易區分，其實應該這樣作：

  // 增長用戶
  localhost:3030/user/add
  // 修改用戶
  localhost:3030/user/update?id=1

4.Vue 組件

• 關於 Vue 組件開發規範能夠參考官方的風格指南
• 組件名以單詞大寫開頭駝峯 (PascalCase)

5.細節

• 組件中的字體圖標（icon）儘可能不要用 png 圖片
• 使用兩個空格（space）進行縮進

• Props 中的屬性聲明要明確類型

  // incorrect
  export default {
    props: ['node', 'size']
  }
  
  // correct
  export default {
    props: {
      node: Object, // 對象
      size: [String, Number], // 兩種類型均可以
    }
  }

• 爲v-for設置鍵值key,避免 v-if 和 v-for 用在一塊兒使用。

• 每塊代碼快儘可能加上註釋

  <!-- 正確的示範 -->
  <template>
    <div>
      <!-- Header -->
      <div class="header">...</div>
      
      <!-- User table -->
      <div>
        <el-table>...</el-table>
      </div>
      
      <!-- Add user dialog -->
      <div class="dialog">
        <el-dialog title="新增用戶">...</el-dialog>
      </div>
    </div>
  </template>

  /**
   *@desc  改變狀態
   *@param  id      [String]  改變對象的id
   *@param  status  [String]  改變對象的status
   *@return config  [Object]  配置對象
   */
  changeStatus(id, status) {
    let self = this
      return config = {
      url: api.changeBannerStatus,
      loading: "loading",
      param: {
        banner_position_id: id,
        status: status
      }
    };

參考和引用地址：
騰訊規範文檔：http://alloyteam.github.io/Co...