、语义化标签

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从入门到精通 。