Vue 開發(fā)規(guī)范目錄及說明

• 規(guī)范目的
• 命名規(guī)范
• 結(jié)構(gòu)化規(guī)范注
• 釋規(guī)范
• 編碼規(guī)范
• CSS 規(guī)范

規(guī)范目的

為提高團(tuán)隊(duì)協(xié)作效率
便于后臺人員添加功能及前端后期優(yōu)化維護(hù)
輸出高質(zhì)量的文檔

命名規(guī)范

為了讓大家書寫可維護(hù)的代碼，而不是一次性的代碼
讓團(tuán)隊(duì)當(dāng)中其他人看你的代碼能一目了然
甚至一段時(shí)間時(shí)候后你再看你某個時(shí)候?qū)懙拇a也能看

普通變量命名規(guī)范

• 命名方法 ：駝峰命名法
• 命名規(guī)范 ：

1. 命名必須是跟需求的內(nèi)容相關(guān)的詞，如

let  productPageDetail = "產(chǎn)品詳情頁面";

2. 命名是復(fù)數(shù)的時(shí)候需要加s,如

const productList = new Array(); 

常量

• 命名方法 : 全部大寫
• 命名規(guī)范 : 使用大寫字母匈牙利式命名法。

const MAX_COUNT = 10
const URL = 'https://www.cupshe.com/'

組件命名規(guī)范（駝峰式命名）

• 公用組件以cupshe_AR(公司+項(xiàng)目名)開頭如：

cupsheAR-TopBar,
cupsheDE-TopBar

• 頁面內(nèi)部組件以組件模塊名簡寫為開頭，Item 為結(jié)尾，如：

addToCartItem,
checkoutItem

method 方法命名命名規(guī)范

• 匈牙利式命名，統(tǒng)一使用動詞或者動詞+名詞形式

get_user_list,
submit_cart_product

• 請求數(shù)據(jù)方法，以 data 結(jié)尾

get_product_list_data
get_user_data

views下的文件命名

• 盡量是名詞,且使用駝峰命名法

productDetailPage

props 命名

• 在聲明 prop 的時(shí)候，使用駝峰命名法，在模板中使用 kebab-case

<script>
props: {
    greetingText: String
}
</script>
<welcome-message greeting-text="hi"></welcome-message>

結(jié)構(gòu)化規(guī)范

目錄文件夾及子文件規(guī)范

以下統(tǒng)一管理處均對應(yīng)相應(yīng)模塊
以下全局文件文件均以 index.js 導(dǎo)出，并在 main.js 中導(dǎo)入
以下臨時(shí)文件，在使用后，接口已經(jīng)有了，發(fā)版后清除

src                               源碼目錄
|-- api                              接口，統(tǒng)一管理
|-- assets                           靜態(tài)資源，統(tǒng)一管理
|-- components                       公用組件，全局文件
|-- filters                          過濾器，全局工具
|-- icons                            圖標(biāo)，全局資源
|-- datas                            模擬數(shù)據(jù)，臨時(shí)存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模擬接口，臨時(shí)存放
|-- router                           路由，統(tǒng)一管理
|-- store                            vuex, 統(tǒng)一管理
|-- views                         視圖目錄
|   |-- staffWorkbench               視圖模塊名
|   |-- |-- staffWorkbench.vue       模塊入口頁面
|   |-- |-- indexComponents          模塊頁面級組件文件夾
|   |-- |-- components               模塊通用組件文件夾

vue 文件基本結(jié)構(gòu)

<template>
    <div>
      
    </div>
  </template>
  <script>
    export default {
      components : {
      
      },
      data () {
        return {
        
        }
      },
      mounted() {
      
      }，
      methods: {
      
      }
   }
  </script>
  <!--聲明語言，并且添加scoped-->
  <style lang="scss" scoped>
  
  </style>

組件選項(xiàng)順序

- components
- props
- data
- computed
- created
- mounted
- metods
- filter
- watch

注釋規(guī)范

務(wù)必添加注釋列表

1. 公共組件使用說明
2. 各組件中重要函數(shù)或者類說明
3. 復(fù)雜的業(yè)務(wù)邏輯處理說明
4. 特殊情況的代碼處理說明,對于代碼中特殊用途的變量、存在臨界值、函數(shù)中使用的 hack、使用
5. 了某種算法或思路等需要進(jìn)行注釋描述
6. 多重 if 判斷語句
7. 注釋塊必須以/（至少兩個星號）開頭/
8. 單行注釋使用//

編碼規(guī)范

指令規(guī)范

:class="{'show-left'：true}"
@click="getListData"

v-for 循環(huán)必須加上 key 屬性，在整個 for 循環(huán)中 key 需要唯一

<ul>
    <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
    </li>
</ul>

避免 v-if 和 v-for 同時(shí)用在一個元素上（性能問題）

• 將數(shù)據(jù)替換為一個計(jì)算屬性，讓其返回過濾后的列表

<ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
 
  <script>
  computed: {
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isActive
      })
    }
  }
  </script>

• 將 v-if 移動至容器元素上 (比如 ul, ol)

<ul v-if="shouldShowUsers">
    <li v-for="user in users" :key="user.id">
        {{ user.name }}
    </li>
</ul>

Props 規(guī)范

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

其他

避免 this.$parent調(diào)試信息
console.log() debugger 使用完及時(shí)刪除

除了三目運(yùn)算，if,else 等禁止簡寫

CSS 規(guī)范

統(tǒng)一使用"-"連字符
省略值為 0 時(shí)的單位
如果 CSS 可以做到，就不要使用 JS
建議并適當(dāng)縮寫值，提高可讀性，特殊情況除外

padding-bottom: 0;
margin: 0;

• 分類的命名方法

使用單個字母加上"-"為前綴
布局（grid）（.g-）；
模塊（module）（.m-）；
元件（unit）（.u-）；
功能（function）（.f-）；
皮膚（skin）（.s-）；
狀態(tài)（.z-）。