、語(yǔ)義化標(biāo)簽

1. 列表使用 ul li
2. 文字使用 p span em cite 等標(biāo)簽
3. 標(biāo)題使用 h1 h2 等標(biāo)簽
4. 布局使用 section aside header footer article 等 HTML5 布局標(biāo)簽

2、自定義標(biāo)簽

使用自閉合標(biāo)簽的寫法 小寫加下劃線

<template>
  <my-owner-components />
</template>

3、多特性分行寫

為提高可讀性 組件應(yīng)用時(shí)換行 按照 ref、class、傳入、傳出 順序書寫

<template>
  <my-components
    ref="myComponents"
    class="home-my-components"
    :data="data"
    @changeHandle="changeHandle"
  />
</template>

4、行內(nèi)使用表達(dá)式

在模版中 簡(jiǎn)單情況使用表達(dá)式 復(fù)雜情況使用計(jì)算屬性或函數(shù)

<template>
  <!-- 簡(jiǎn)單情況 -->
  <div v-show="data.type===1">
    ...
  </div>
  <!-- 復(fù)雜情況 -->
  <div v-show="getTypeShow(data)">
    ...
  </div>
</template>

<script>
export default {
  methods: {
    /**
    * ***顯示判斷
    * @param data **
    */
    getTypeShow(data) {
      return data.type===1 && ...
    }
  }
}
</script>

5、避免重復(fù)

避免過(guò)多重復(fù)代碼 果超過(guò)三行類似的代碼 配置數(shù)據(jù)再循環(huán)遍歷

6、代碼嵌套

根據(jù)元素嵌套規(guī)范 每個(gè)塊狀元素獨(dú)立一行 內(nèi)聯(lián)元素可選

<template>
  <!-- 情況1 -->
  <div>
    <h1></h1>
    <p></p>
    <p><span></span><span></span></p>
  </div>
  <!-- 情況2 -->
  <div>
    <h1></h1>
    <p></p>
    <p>
      <span></span>
      <span></span>
    </p>
  </div>
</template>

7、活用v-if v-show

v-show 不會(huì)改變dom樹 不會(huì)導(dǎo)致重新渲染 用于頻繁的切換顯示隱藏
v-if 會(huì)改變dom樹 會(huì)導(dǎo)致重新渲染 用于只控制一次顯示隱藏

8、注釋規(guī)范

<template>
  <!-- 標(biāo)簽注釋 -->
  <div>
    ...
  </div>
  <!-- 組件注釋 -->
  <my-owner-components />
</template>

CSS規(guī)范

1、避免使用

1. 避免使用標(biāo)簽選擇器 因?yàn)樵?Vue 中 特別是在局部組件 使用標(biāo)簽選擇器效率特別低 損耗性能 建議需要的情況直接定義 class
2. 非特殊情況下 禁止使用 ID 選擇器定義樣式（有 JS 邏輯的情況除外）
3. 避免使用important選擇器
4. 避免大量的嵌套規(guī)則 控制在3級(jí)之內(nèi) 對(duì)于超過(guò)4級(jí)的嵌套 考慮重寫或新建子項(xiàng)
5. 避免使用ID選擇器及全局標(biāo)簽選擇器防止污染全局樣式

2、推薦使用

1. 提取公用樣式進(jìn)assets文件styles里 按模塊/功能區(qū)分
2. 使用 scoped 關(guān)鍵字 約束樣式生效的范圍
3. 可復(fù)用屬性盡量抽離為頁(yè)面變量 易于統(tǒng)一維護(hù)
4. 使用混合（mixin）根據(jù)功能定義模塊 然后在需要使用的地方通過(guò) @include 調(diào)用 避免編碼時(shí)重復(fù)輸入代碼段

3、書寫順序

CSS 屬性書寫順序 先決定定位寬高顯示大小 再做局部細(xì)節(jié)修飾
定位屬性(或顯示屬性 display)=> 寬高屬性=> 邊距屬性(margin padding)=> 背景 顏色 字體等修飾屬性的定義 這樣定義為了更好的可讀性 讓別人只要看一眼就能在腦海中浮現(xiàn)最終顯示的效果

.class-name {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 10px;
  padding: 10px;
  background-color: red; 
  border-radius: 2px;
  font-size: 14px;
  color: #000;
  line-height: 1.42;
}

4、樣式覆蓋

組件內(nèi)部需要覆蓋UI框架樣式 必須在最外層組件加類名

<template>
  <div class="input-container">
    <el-input class="name-input"></el-input>
  </div>
</template>

<style lang="scss">
.input-container {
  .name-input {
    .el-input__inner {
      font-size: 16px;
    }
  }
}
</style>

5、注釋規(guī)范

以 / 注釋內(nèi)容 / 格式注釋 前后空格 嵌套子類需要一個(gè)回車分割開

/* 注釋內(nèi)容 */
.class-name {
  width: 20px;
  
   /* 這里需要換行 */
  .class-name-l {
    color: blue
  }
}

JS規(guī)范

1、用法規(guī)范

1. 在vue-cli 腳手架使用架自帶的指向 src 開發(fā)目錄的 '@' 符號(hào)引入文件資源
2. 使用 template 或計(jì)算屬性規(guī)避 v-if 和 v-for 用在一起
3. 統(tǒng)一使用單引號(hào)
4. 堅(jiān)持單一原則 函數(shù)內(nèi)僅做該函數(shù)應(yīng)該做的 盡量避免通過(guò)傳入標(biāo)記控制不同行為
5. 優(yōu)先考慮三目運(yùn)算符 但不要寫超過(guò)3層的三目運(yùn)算符
6. 對(duì)于無(wú)用代碼必須及時(shí)刪除 例如：一些調(diào)試的 console 語(yǔ)句、無(wú)用的棄用功能代碼
7. 請(qǐng)求數(shù)據(jù)的方法使用try catch 錯(cuò)誤捕捉 注意執(zhí)行回調(diào)

2、組件順序規(guī)范

<script>
export default {
  name: 'ExampleName',        // 這個(gè)名字推薦：大寫字母開頭駝峰法命名
  props: {},                  // Props 定義
  components: {},             // 組件定義
  directives: {},             // 指令定義
  mixins: [],                 // 混入 Mixin 定義。
  data () {                   // Data 定義。
    return {
      dataProps: ''           // Data 屬性的每一個(gè)變量都需要在后面寫注釋說(shuō)明用途，就像這樣
    }
},
  computed: {},               // 計(jì)算屬性定義。
  watch: {},                  // 屬性變化監(jiān)聽器。
  created () {},              // 生命鉤子函數(shù)，按照他們調(diào)用的順序。
  mounted () {},              // 掛載到元素。
  activated () {},            // 使用 keep-alive 包裹的組件激活觸發(fā)的鉤子函數(shù)。
  deactivated () {},          // 使用 keep-alive 包裹的組件離開時(shí)觸發(fā)的鉤子函數(shù)
  methods: {                  // 組件方法定義。
    publicbFunction () {}     // 公共方法的定義，可以提供外面使用
    _privateFunction () {}    // 私有方法，下劃線定義，僅供組件內(nèi)使用。多單詞，注意與系統(tǒng)名字沖突！
  }
}
</script>

3、注釋規(guī)范

函數(shù)/方法注釋必須包含函數(shù)說(shuō)明，有參數(shù)和返回值時(shí)必須使用注釋標(biāo)識(shí)，它的作者, 依賴關(guān)系和兼容性信息。

1. 單行注釋：雙斜線后應(yīng)跟空格，且縮進(jìn)與上下文的代碼保持一致；或在行尾注釋，在行尾依然需要左右空格

// 注釋
const userID=24
const userID=12 // 注釋

2. 多行注釋：一般用于注釋難以理解的、可能存在錯(cuò)誤的、邏輯強(qiáng)的代碼，且縮進(jìn)一致

/*
 * 針對(duì)下方代碼的說(shuō)明
 * 第一行太長(zhǎng)寫第二行
 */
const aa=1

3. 函數(shù)注釋：寫明傳入?yún)?shù)名稱、類型推薦完整注釋以下格式

/**
 * @Description 加入購(gòu)物車
 * @Author luochen_ya
 * @Date 2024-03-13
 * @param {Number} goodId 商品id
 * @param {Array<Number>} specs sku規(guī)格
 * @param {Number} amount 數(shù)量
 * @param {String} remarks 備注
 * @returns <Promise> 購(gòu)物車信息
 */
apiProductAddCard=(goodId, specs, amount, remarks)=> {
  return axios.post('***', { goodId, specs, amount, remarks })
}

4. 文件注釋：寫明文件描述

/**
 * @Description: 文件描述
 * @Author: luochen_ya
 * @Date: 2024-03-13
 */

命名規(guī)范

1、目錄命名

按照小駝峰命名 首字母小寫

1. 項(xiàng)目文件夾：projectName
2. 樣式文件夾：css / scss
3. 腳本文件夾：js

2、圖片命名

圖片就是img開頭 圖標(biāo)就是icon開頭

1. img_功能_模塊_編號(hào)
2. icon_功能_模塊_編號(hào)

3、文件命名

1. 按照小駝峰命令 英文單詞過(guò)長(zhǎng)或超出2個(gè)以上 可縮略至前四位 列如：comming_soon.png 等
2. 有復(fù)數(shù)含義 采用復(fù)數(shù)命名 列如：minixs styles images icons 等
3. 靜態(tài)資源命名格式為小寫 + 下劃線 列如：icon_arrow.png img_logo.png 等
4. 組件命名為小駝峰 公用組件加上gd前綴 列如：gdOwnerComponents 等

4、方法命名

method 方法命名不同于文件命名，盡量完整英文命名，語(yǔ)義表達(dá)需完整清楚

1. 按照小駝峰命名法 可使用常見動(dòng)詞約定

• can： 判斷是否可執(zhí)行某個(gè)動(dòng)作 函數(shù)返回一個(gè)布爾值 true可執(zhí)行 false不可執(zhí)行
• has： 判斷是否含有某個(gè)值 函數(shù)返回一個(gè)布爾值 true含有此值 false不含有此值
• is： 判斷是否為某個(gè)值，函數(shù)返回一個(gè)布爾值 true為某個(gè)值 false不為某個(gè)值
• get： 獲取某個(gè)值 函數(shù)返回一個(gè)非布爾值
• set： 設(shè)置某個(gè)值 無(wú)返回值或者返回是否加載完成的結(jié)果

2. 語(yǔ)義化英文命名 僅組件內(nèi)部使用方法前加上_（下劃線）區(qū)分

<script>
export default {
  methods: { // 組件方法定義
    publicbFunction () {} // 公共方法的定義 可以提供外面使用
    _privateFunction () {} // 私有方法 下劃線定義 僅供組件內(nèi)使用
  }
}
</script>

3. 引入組件：首字母大寫的駝峰法命名

import MyOwnerComponents from '@/components/MyOwnerComponents'

4. 變量：使用駝峰式命名 優(yōu)先使用 let const 避免使用 var

let userName='luochen_ya'
const userInfo={
  name: 'luochen_ya',
  age: 24
}

5. 常量：字母全部大寫 以下橫線 _ 劃分

const Constant={
  // 公用狀態(tài)
  COMMON_STATUS_ENABLE=1, // 啟用
  COMMON_STATUS_DISABLE=2, // 停用
}

5、樣式命名

class命名以小寫字母開頭 小寫字母、中劃線和數(shù)字組成 以下是一些常用到的 class的名字

1. 包裹層: .xxx-wrap
2. 列表: .xxx-list
3. 列表項(xiàng): .xxx-list-item
4. 左邊內(nèi)容: .xxx-left
5. 中間內(nèi)容: .xxx-middle
6. 右邊內(nèi)容: .xxx-right
7. 某個(gè)頁(yè)面：.xxx-page

6、常用詞

1. 常用動(dòng)詞

• get=> 取值
• set=> 給值
• add=> 新增
• remove=> 移除
• show=> 顯示
• hide=> 隱藏
• view=> 查看
• browse=> 瀏覽
• edit=> 修改
• save=> 保存
• delete=> 刪除
• find=> 查詢
• undo=> 撤銷
• redo=> 重做
• clean=> 清除
• index=> 索引
• observe=> 觀察
• send=> 發(fā)送
• receive=> 接收
• refresh=> 刷新
• synchronize=> 同步

2. 常用縮寫

• object=> obj
• array=> arr
• function=> fn
• message=> msg
• button=> btn

工程結(jié)構(gòu)

1、目錄構(gòu)建

├── api                       所有api接口
├── assets                    靜態(tài)資源
│   ├── fonts                   全局公用字體
│   ├── icons                   全局公用圖標(biāo)
│   ├── images                  全局公用圖片
│   └── styles                  全局公用樣式
├── components                公用組件
│   ├── base                    基礎(chǔ)組件
│   └── business                業(yè)務(wù)組件
├── constants                 常量 統(tǒng)一管理
├── locales                   多語(yǔ)言管理
├── plugins                   插件 統(tǒng)一管理
├── router                    路由 統(tǒng)一管理
│   └── index.js               
├── store                     vuex 統(tǒng)一管理
│   ├── modules                 
│   ├── getters.js              
│   └── index.js                
├── utils                     工具函數(shù) 統(tǒng)一管理
├── views                     視圖目錄（所有業(yè)務(wù)邏輯的頁(yè)面）

2、代碼風(fēng)格

可以直接使用eslint 強(qiáng)制統(tǒng)一代碼規(guī)范 還能規(guī)避一些語(yǔ)法錯(cuò)誤 或者按照以下自己定義的去配置eslint來(lái)使用
以下是個(gè)人習(xí)慣 僅供參考

1. 首行縮進(jìn)2空格
2. js代碼去除分號(hào)
3. html代碼超出255字符一行進(jìn)行換行操作
4. js代碼統(tǒng)一使用單引號(hào)或雙引號(hào)