、語義化標簽

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

2、自定義標簽

使用自閉合標簽的寫法 小寫加下劃線

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

3、多特性分行寫

為提高可讀性 組件應用時換行 按照 ref、class、傳入、傳出 順序書寫

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

4、行內使用表達式

在模版中 簡單情況使用表達式 復雜情況使用計算屬性或函數

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

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

5、避免重復

避免過多重復代碼 果超過三行類似的代碼 配置數據再循環遍歷

6、代碼嵌套

根據元素嵌套規范 每個塊狀元素獨立一行 內聯元素可選

<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 不會改變dom樹 不會導致重新渲染 用于頻繁的切換顯示隱藏
v-if 會改變dom樹 會導致重新渲染 用于只控制一次顯示隱藏

8、注釋規范

<template>
  <!-- 標簽注釋 -->
  <div>
    ...
  </div>
  <!-- 組件注釋 -->
  <my-owner-components />
</template>

CSS規范

1、避免使用

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

2、推薦使用

1. 提取公用樣式進assets文件styles里 按模塊/功能區分
2. 使用 scoped 關鍵字 約束樣式生效的范圍
3. 可復用屬性盡量抽離為頁面變量 易于統一維護
4. 使用混合（mixin）根據功能定義模塊 然后在需要使用的地方通過 @include 調用 避免編碼時重復輸入代碼段

3、書寫順序

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

.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、樣式覆蓋

組件內部需要覆蓋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、注釋規范

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

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

JS規范

1、用法規范

1. 在vue-cli 腳手架使用架自帶的指向 src 開發目錄的 '@' 符號引入文件資源
2. 使用 template 或計算屬性規避 v-if 和 v-for 用在一起
3. 統一使用單引號
4. 堅持單一原則 函數內僅做該函數應該做的 盡量避免通過傳入標記控制不同行為
5. 優先考慮三目運算符 但不要寫超過3層的三目運算符
6. 對于無用代碼必須及時刪除 例如：一些調試的 console 語句、無用的棄用功能代碼
7. 請求數據的方法使用try catch 錯誤捕捉 注意執行回調

2、組件順序規范

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

3、注釋規范

函數/方法注釋必須包含函數說明，有參數和返回值時必須使用注釋標識，它的作者, 依賴關系和兼容性信息。

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

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

2. 多行注釋：一般用于注釋難以理解的、可能存在錯誤的、邏輯強的代碼，且縮進一致

/*
 * 針對下方代碼的說明
 * 第一行太長寫第二行
 */
const aa = 1

3. 函數注釋：寫明傳入參數名稱、類型推薦完整注釋以下格式

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

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

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

命名規范

1、目錄命名

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

1. 項目文件夾：projectName
2. 樣式文件夾：css / scss
3. 腳本文件夾：js

2、圖片命名

圖片就是img開頭 圖標就是icon開頭

1. img_功能_模塊_編號
2. icon_功能_模塊_編號

3、文件命名

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

4、方法命名

method 方法命名不同于文件命名，盡量完整英文命名，語義表達需完整清楚

1. 按照小駝峰命名法 可使用常見動詞約定

• can： 判斷是否可執行某個動作 函數返回一個布爾值 true可執行 false不可執行
• has： 判斷是否含有某個值 函數返回一個布爾值 true含有此值 false不含有此值
• is： 判斷是否為某個值，函數返回一個布爾值 true為某個值 false不為某個值
• get： 獲取某個值 函數返回一個非布爾值
• set： 設置某個值 無返回值或者返回是否加載完成的結果

2. 語義化英文命名 僅組件內部使用方法前加上_（下劃線）區分

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

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

import MyOwnerComponents from '@/components/MyOwnerComponents'

4. 變量：使用駝峰式命名 優先使用 let const 避免使用 var

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

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

const Constant = {
  // 公用狀態
  COMMON_STATUS_ENABLE = 1, // 啟用
  COMMON_STATUS_DISABLE = 2, // 停用
}

5、樣式命名

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

1. 包裹層: .xxx-wrap
2. 列表: .xxx-list
3. 列表項: .xxx-list-item
4. 左邊內容: .xxx-left
5. 中間內容: .xxx-middle
6. 右邊內容: .xxx-right
7. 某個頁面：.xxx-page

6、常用詞

1. 常用動詞

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

2. 常用縮寫

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

工程結構

1、目錄構建

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

2、代碼風格

可以直接使用eslint 強制統一代碼規范 還能規避一些語法錯誤 或者按照以下自己定義的去配置eslint來使用
以下是個人習慣 僅供參考

1. 首行縮進2空格
2. js代碼去除分號
3. html代碼超出255字符一行進行換行操作
4. js代碼統一使用單引號或雙引號

先，我們來理解一下一個網頁的基本組成

代碼如下

一個網頁是有許許多多的標簽對組成的，即開始標簽-結束標簽，都是成對出現（當然我們后面會說的還存在單標簽，表示自閉合標簽，例如：<br />）

對上述的標簽先來解釋一下

html------------超文本標記語言，瀏覽器識別的語言，主要負責頁面的內容和結構

head------------標簽用于定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。

body------------元素定義文檔的主體。body 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）

HTML常用基礎標簽用法及實例

1. <!--注釋-->

2. <!--DOCTYPE 聲明文檔類型-->

3. <!--a--><a href="http://www.baidu.com/">百度一下</a></br><!--超鏈接標簽-->

4. <!--address--><address> 標簽定義文檔或文章的作者/擁有者的聯系信息。

如果 <address> 元素位于 <body> 元素內，則它表示文檔聯系信息。

如果 <address> 元素位于 <article> 元素內，則它表示文章的聯系信息.-->

</address>

5. <!--5.article <article> 標簽規定獨立的自包含內容。-->

<article>

<h1>百度</h1>

<p>全球最大的中文搜索引擎、致力于讓網民更便捷地獲取信息，找到所求。</p>

</article>

6. <!--6.aside <aside> 標簽定義其所處內容之外的內容。-->

<p>123123</p>

<aside>

<h1>文本之外的內容</h1>

<p>我也是文本之外的內容</p>

</aside>

7.<!-- audio video-- <audio> 標簽定義聲音，比如音樂或其他音頻流。

<audio src="/i/horse.ogg" controls="controls>

</audio>

8.<!--b 文本加粗-->

<p>普通文本--<b>粗體文本</b></p>

9.<!--big -->

<big>大號字體</big><br>

10.<!-- body body 主體內容-->

11.<!-- br 給文本換行-->

12.<!--button <bubtton> 標簽定義一個按鈕。-->

<button type="button">點擊領取</button>

13.<!--center 對其所包括的文本進行水平居中。-->

14.<!--dl dd dt <dd> 在定義列表中定義條目的定義部分。-->

<dl>

<dt>計算機</dt>

<dd>用來計算的儀器 ... ...</dd>

<dt>顯示器</dt>

<dd>以視覺方式顯示信息的裝置 ... ...</dd>

</dl>

15.<!--del ins <del>定義文檔中已被刪除的文本。 <ins> 標簽定義已經被插入文檔中的文本。-->

<p>你叫<del>張3</del><ins>文字</ins>嗎？</p>

16.<!--div p h1-h6 div是塊標簽 p是段落標簽 h1-h6是標題標簽根據h后面數值調整大小-->

17.<!--em span i strong <em>把文本定義為強調的內容。<span> 標簽被用來組合文檔中的行內元素。

<i> 標簽顯示斜體文本效果。<strong>把文本定義為語氣更強的強調的內容。

-->

<em>強調文本內容</em>

<p><span>組合文檔中的行內元素</span>你好啊</p>

<i>斜體文本</i><br>

<stong>內容重要</strong>

18.<!--footer nav <footer> 標簽定義文檔或節的頁腳。<nav> 標簽定義導航鏈接的部分.-->

<footer>

<p>聯系郵箱：<a >href="1758539486@qq.com">1758539486@qq.com</a></p>

</footer>

<nav>

<a href="http://www.baidu.com">百度</a>|

<a href="http://www.douyu.com">斗魚</a>

</nav>

19.<!-iframe iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）-->

20.<!--hr html-- <hr>文本分割線 <html>根文件-->

21.<!--img input label-- img 元素向網頁中嵌入一幅圖像。

<input>--表單標簽（一共八種類型） 如下所示：

<input type="radio" name=""value="單選"/>

<input type="checkbox" name=""value="選擇"/>

<input type="submit" name=""value="提交"/>

<input type="button" name=""value="按鈕"/>

<input type="password" name=""value="密碼"/>

<input type="text" name=""value="文本"/>

<input type="reset" name=""value="清空"/>

<input type="hidden" name=""value="隱藏"/>

<label> 標簽為 input 元素定義標注（標記）。

-->

<img src="img/Advertisement_03-3.jpg" alt="" /><br>

<label for="男">男</label>

<input type="radio" name="sex" id="男">

<input type="submit" name="提交" >

22.<!--ol ul li <ol>有序列表 <ul>無序列表 <li>列表項目-->

23.<!--link script <link>標簽最常見的用途是鏈接樣式表。<script> 標簽用于定義客戶端腳本，比如 JavaScript。-->

24.<!--select option <select> 元素可創建單選或多選菜單。<select> 元素中的 <option> 標簽用于定義列表中的可用選項。-->

<select name="">

<option value="">請選擇</option>

<option value="">選項一</option>

<option value="">選項二</option>

<option value="">選項三</option>

<option value="">選項四</option>

</select>

25.<!--textarea <textarea> 標簽定義多行的文本輸入控件。-->

<textarea></textarea>

resize禁止拉伸文本框

outline取消文本框選中的顏色

Text-indent:2em首行縮進兩個字符

希望閱讀本篇文章以后大家有所收獲，幫助大家HTML5+CSS3從入門到精通 。