什么是规范
规范就是一个大家都认同,都接受的一种模式.为什么要有这个规范呢,一是让自己的代码的可读性更高,别人一看就懂,二是也方便自己去回顾自己的代码.
提高开发的效率,使自己写出的代码不至于成为屎山.
规范的分类
- HTML编码规范
- 变量名命名规范
- 文件夹命名规范
- 组件命名规范
- 编码格式规范
规范的实施
目前来说，存在着很多的规范，每个大厂的规范也不是一样的，比如阿里的规范，腾讯的规范，这时候应该怎么办呢，我们可以去采取一个折中的方法，集百家之长，成一家之言。
外部资源
前端html页面中的命名规范_wgaoxian的博客-CSDN博客
前端代码规范 及 最佳实践 | Isobar (coderlmn.github.io)
我常常烦恼的规范
- 文件夹命名
- 组件文件的命名
- 函数的命名
- HTML标签 class和id的命名
我的总结(简洁)
- Vue组件文件的命名，组件名应该始终是多个单词组成（大于等于 2），且命名规范为 PascalCase(大驼峰) 格式，避免和 HTML 元素名称冲突。
Vue组件相关
命名
1、单例组件使用 The 前缀
2、非业务通用组件使用 Base 前缀
3、以两个单词组成的文件名时，应采用主次原则，如 TodoList，以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
模板中使用组件
说明：因为html对大小写不敏感, 所以在的template驼峰命名的都要写成短线分割形式，如
<component-vue></component-vue>
结构化
src 源码目录
|-- api 接口，统一管理
|-- assets 静态资源，统一管理
|-- components 公用组件，全局文件
|-- filters 过滤器，全局工具
|-- icons 图标，全局资源
|-- datas 模拟数据，临时存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模拟接口，临时存放
|-- router 路由，统一管理
|-- store vuex, 统一管理
|-- views 视图目录
| |-- staffWorkbench 视图模块名
| |-- |-- staffWorkbench.vue 模块入口页面
| |-- |-- indexComponents 模块页面级组件文件夹
| |-- |-- components 模块通用组件文件夹
HTML语义化相关
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
函数的命名规则
函数是编程中非常重要的概念，良好的函数命名可以让代码清晰易懂，提高代码的可读性和可维护性。
1、函数的名称一般由 数字，字母，下划线 组成。
2、函数的命名要有意义，要做到顾名思义，尽可能描述函数的功能和用途。 例如，如果函数的作用是计算两个数字的和，那么函数名可以命名为“calculate_sum”或者“add_numbers”。
3、使用动词加名词的命名方式：函数名应该以一个动词开始，后面跟着一个名词或形容词，例如“get_value”、“calculate_average”。
4、使用清晰简洁的函数参数名：函数参数名应该能够清晰表达它们的含义，例如，如果函数需要接收一个字符串参数，那么可以将其命名为“string”。
业界编码风格习惯：
- 全小写，下划线（旧式C） go_to_school
- 每个单词首字母大写（C++）GoTOScool
- 第一个单词小写开头，后面的大写开头（JAVA、C#） goSchool
CSS 类和ID的命名
在查资料的时候看到了一句话觉得讲的非常的好，
这个类有什么作用，扮演了什么样的角色"（而不只是 "它看上去像是什么？"。）
例如红色的盒子：.red-box,只是看起来是红色的盒子，其实应该是 .color-box