vue3编码规范

不要停止努力呦！

已于 2023-08-01 09:51:58 修改

阅读量685

点赞数

文章标签：前端 javascript vue.js

于 2023-07-31 20:51:40 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42657934/article/details/132030216

版权

文章介绍了前端开发中的文件命名规范，提倡使用小写字母和连字符的kebab-case，以及PascalCase命名组件。同时，详细阐述了Vue组件的选项顺序和组件样式的BEM原则，包括块、元素和修饰符的定义方法，强调了块的独立性和元素的层次结构，以及修饰符的使用规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件命名规范

使用小写字母和连字符（kebab-case）命名文件，组件命名使用PascalCase（首字母大写驼峰型）。
命名要以父组件名为前缀，例：TodoList、TodoListTable
一般化描述放前，特殊化描述放后，例：SearchButtonClear、SettingsCheckboxLaunchOnStartup
起名尽量使用完整单词而不是缩写，前提是要配置好编辑器，使书写长命名的代价足够低。

标签顺序

标签顺序统一为

组件选项顺序

按照Vue官方推荐的顺序书写组件选项，例如props、data、computed、methods等。

组件导入顺序

按照一定的顺序导入Vue内置组件、第三方库组件和自定义组件。

组件样式

在组件样式中使用BEM（块、元素和修饰符）命名规范，避免使用全局样式。

Block

块名称与元素名称之间用双下划线__分隔
块名称与修饰符或元素与修饰符之间用双连字符–分隔
命名一般使用小写字母。
单词之间可以使用-分隔。

  .block_span{ }
  .block--active{}
  .block_span{}--active{}

使用块时，块不应影响其环境，不设置块的外部几何形状或位置,块应该是独立的。

Html
 <div class="head">
   <form action="" class="search-form"></form>
  </div>
  <div class="bottom"></div>
  
css
  .head{}
  .bottom{}

Element

元素之间可以彼此嵌套，一个元素总是一个模块的一部分，所以元素的名称层次结构如下

<div class="head">
  <form action="" class="search-form">
    <input type="text" class="search-form-input">
    <button class="search-form-btn"></button>
  </form>
</div>

Modifier

修饰符不能单独使用，而且必须绑定在对应的块或元素上

<div class="banner__btn">
    <button class=".button .banner__btn--red"></button>  
    <button class=".button .banner__btn--green"></button>
    <button class=".button .banner__btn--blue"></button>   
    <button class=".button .banner__btn--yellow"></button>       
</div>
.banner__btn--red { background-color: red; }
.banner__btn--green { background-color: green; }
.banner__btn--blue { background-color: blue; }
.banner__btn--yellow { background-color: yellow; }