前端规范的必要性
1.解决糟糕的开发体验：对于程序员来说，代码就是自己的脸面，如果说某一天你接手了一个项目，目录结构混乱，没有任何注释，css和js变量命名毫无语义并且一下驼峰一下短横线连接的写法，函数方法随处写... 我觉得你一定会疯掉~~
2.提高团队合作效率：俗话说人多力量大，不过没有统一合理的标准，大家都按照自己的想法各做各的，人多反而还会造成效率下降，前端规范尽力保证团队的代码风格就如同一个人写出来的代码风格一样
3.有利于代码对接测试、开展代码评审、提升可维护性
以下为正文部分(这里只列举日常开发所需的大部分规范 并不是严格意义上的所有前端规范集合)
1.目录结构规范（以vue脚手架生成项目为例）
1.1根目录规范：根目录下按照职能进行划分，不允许将资源类型或者业务逻辑的目录划分到根目录下
1.2开发目录规范（src）：建议根据业务逻辑划分目录结构
1.3目录规范注意点：
1）命名：简洁 有习惯性的缩写单词，采用容易理解的缩写。如源代码目录src，不要写成source
2）层级：建议按照路由嵌套关系对api以及view里面的文件夹进行层级嵌套
2.HTML规范
2.1.模块注释（尽量标记模块）
2.2.语义化：
尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。
例如标题之类的可以用 <h1> <h2>...
头尾模块使用<header>和<footer>
行类元素和块级元素不可乱用 一般情况不要写一个span标签强行通过css改为块级元素
2.3.标签属性顺序
2.4.编写 HTML 代码时，尽量避免多余的无意义的父元素。
2.5.没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）
3.CSS规范
3.1.命名规范
一律小写英文 命名短且语义化 多单词连接 基于最近的父 class 或基本（base） class 作为新 class 的前缀
建议使用BEM命名原理 可以按照项目自己控制简单一点 个人推荐可以按照 组件名称-元素–修饰符来进行命名
原则 ：语义化+尽量避免重复造成样式覆盖
3.2.项目公用css样式 单独提取出来 可使用预处理语言定义项目需要经常用的到各种变量 比如颜色 间距值 字体大小等等
3.3.预处理语言只能在项目使用一种 不可五花八门sass less stylus混用
3.4.数值：小于1的小数，可省略0，opacity: .4，为0的就不要单位 margin: 0;
3.5颜色：统一使用十六进制，大小写约定统一（建议统一小写），可缩写就缩写例如 #fff 代替#ffffff；
4.JS规范
4.1.命名规范：
全局变量以及常量, 使用全部字母大写，单词间下划线分隔的命名方式。
一般变量, 使用 Camel（驼峰） 命名法。
私有属性、变量和方法以下划线 _ 开头
构造函数和类以大写字母开头
4.2.函数注释：简单描述函数作用以及参数
4.3.三元操作符用于替代 if 条件判断语句
4.4.善用&& 和 ||
二元布尔操作符是可短路的, 只有在必要时才会计算到最后一项
5.编码规范
无论是html css还是js 对于代码格式都是有一定规范的 比如 单引号和双引号的使用 缩进格式 花括号位置 空格等等
不过这些问题 目前都可以使用代码格式化工具帮助我们完善 这边推荐统一使用前端代码格式化工具prettier
6.vue项目推荐规范（来自官网的推荐用法结合个人项目里经常使用的规范）
6.1.组件名应该始终是多个单词的，根组件 App 以及 <transition>、<component> 之类的 Vue 内置组件除外。可以避免跟现有的以及未来的 HTML 元素冲突，因为所有的 HTML 元素名称都是单个单词的。
6.2.prop 的定义应该尽量详细
细致的 prop 定义有两个好处：
- 它们写明了组件的 API，所以很容易看懂组件的用法；
- 在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。
6.3.在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态（如果没加会在浏览器报warning）
6.4.避免 v-if 和 v-for 用在一起，因为当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级
6.5.为非公有组件样式设置作用域(scoped属性运用) 如果你和其他开发者一起开发一个大型工程，或有时引入三方 HTML/CSS (比如来自 Auth0)，设置一致的作用域会确保你的样式只会运用在它们想要作用的组件上
6.6.单文件组件的文件名应该以单词大写开头 (PascalCase)
6.7.在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做
应该如下：
<my-component></my-component>
6.8.在单文件组件和字符串模板中组件名应该总是 PascalCase（大写字母开头） 的——但是在 DOM 模板中总是 kebab-case（短横线连接） 的。
6.9.prop名大小写
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
6.10.统一使用指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)
6.11.组件/实例的选项应该有统一的顺序
6.12.应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop（子组件改变prop是不被允许的）
6.13.v-if和v-show按照场景使用
v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 适合运营条件不大可能改变
v-show 只是简单的基于css切换 适合频繁切换
