vue组件定义规范

阅读数:64 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

PascalCase 大写驼峰式 如: MClass
camelCase 小写驼峰式 比如: MyClass
kebab-case 小写短横线  比如:my-class

二、组件命名

1、基础组件

如果组件是一个基础组件，意味着它会被频繁使用，可以加上一个特定的前缀，如BaseButton.vue、BaseIcon.vue。

2、单实例组件

只应该存在一个的组件，如导航栏，可以使用The前缀，如：TheHeader.vue。

3、紧密耦合的组件

如果一个组件只在一个父组件的上下文中有意义，可以使用父组件的名字作为前缀，例如：ToDoListItem.vue、ToToListLabel.vue。

三、组件数据

1、属性

使用camelCase（小驼峰）在JS中声明，使用kebab-case（短横线）在模板和父组件绑定中。

禁止拼音，使用有意义的英文。

常量所有单词大写，并且每个单词加下划线。

2、属性类型

尽可能定义属性的类型，例如使用String、Number、Boolean、Array、Object或自定义的类型。

3、属性的默认值

为属性提供默认值，并尽量保证组件的独立性。

4、建议的变量命名

类型前缀+有意义的单词。

    • 字符串，sXXX，如sName。
    • 数字，nXXX，如nPage。
    • 逻辑，bXXX，如bChecked。
    • 数组，aXXX，如aList。
    • 正则，rXXX，如rEmail。
    • DOM节点，dXXX，如dDiv。
    • 其它类型，oXXX，如oButton。

四、模板

1、组件模板清晰

尽量保持模板简单明了，复杂的逻辑应该使用计算属性和方法。

2、指令缩写

对于v-bind和v-on使用缩写形式，即:和@ 。

3、Fragments

利用vue3支持的Fragments特性，不再需要单一根元素包裹模板。

4、Teleport

可以使用<Teleport>组件将子节点渲染到存在于组件外的DOM节点。

五、计处属性和侦听器

1、计算属性

对于任何复杂逻辑，应使用计算属性。

2、侦听器

对于响应式数据变化、执行异步操作、较大的开销操作，使用侦听器。

六、事件命名

1、自定义事件 

使用kebab-case命名，这样可以保持模板中HTML属性的一致性。

七、样式

1、作用域

使用<style scoped>保证样式只应用于当前组件。

尽量避免使用!important。

尽量避免把标签作为选择器。

2、css类命名

在可能的情况下，使用BEM规范来组织CSS类名，类名使用kebab-case（短横线）。

3、BEM规范

（1）Block（块）

代表一个独立的功能区块，它是一个高级的抽象，并且可以在不同的地方重复使用，例如：.button、.menu、.card。

（2）Element（元素）

属于Block的一部分，用于构成Block的一部分。Element依赖于Block的存在。在类名中，Element通过双下划线__与Block连接。例如：.button__text、.menu__item、.card__title。

（3）Modifier（修饰符）

用于表示Block或Element不同状态、变化或版本。在类名中，Modifier通过双连接字符--与Block或Element连接。例如.button--large、.menu--collapsed、.card__title--highlighted。

4、id、变量、函数命名

使用camelCase。

5、建议的css属性顺序

（1）布局定位属性：用来控制元素布局的属性

    • display
    • position
    • top / right / bottom / left
    • float
    • clear

（2）盒模型属性：影响盒模型的属性

    • width / height
    • padding
    • border
    • margin
    • overflow

（3）文字系统属性：设置文本的属性

    • font-family
    • font-size
    • font-weight
    • line-height
    • color
    • text-align
    • text-transform
    • text-decoration
    • white-space
    • word-spacing

（4）视觉效果属性：设置元素视觉效果的属性

    • background
    • color
    • border
    • box-shadow
    • opacity

（5）css3动画与过滤属性

    • transition
    • animation

八、组件结构

1、组件顺序

保持一致的组件选项顺序：<template> <script setup> <style>

使用Composition API时，将相关逻辑组织在一起.

2、单一职责

组织应该专注于一件事，并做好它。

九、注释和文档

1、注释

对复杂的逻辑或不明显的代码块添加注释。

2、对每个组件编写文件 

说明其用途、属性、事件 、插槽等。可以使用JSDoc或者Vue Styleguidist为组件提供文档。

十、工具的使用

1、单元测试

编写易于测试的组件，为组件的功能编写单元测试 。可以使用Vue Test Utils、Jest、Mocha编写单元测试。

2、代码风格

使用ESlint和Prettier来确保代码风格的一致性。

十一、性能优化

1、v-if/ v-show

根据需要使用v-if或v-show，前者完全销毁或重建组件，后者仅改变css的display属性。

2、keyed v-for

在使用v-for时，提供一个唯一的key值，以优化虚拟DOM的渲染性。

十二、项目名/文件目录

1、命名规则

    • 单组件命名：PascalCase，组件名称应该是多单词，如UserProfile.vue，这种方式有助于区分组件和普通的HTML元素。
    • JS文件命名：kebab-case，如date-utils.js。
    • css/scss文件命名：kebab-case，如theme-variables.scss。
    • 测试文件命名：相匹配的组件文件名+.spec.js或.test.js，如UserProfile.spec.js。
    • 目录命名：通常使用全小写字母，如果需要的话，可以使用中划线分隔，例如components
    • vuex相关文件命名：模块使用kebab-case，如user-profile.js。常量使用全大写字母和下划线分隔的，如SET_USER_PROFILE。

2、目录结构

public/			#目录中的文件在构建时会直接被复制，而不会经过任何形式的处理。
|
src/
|-- i18n/
|		|-- index.js       # 初始化i18n实例和配置
|		|-- messages/
|					|-- en.js      # 英文翻译
|					|-- fr.js      # 法文翻译
|					|-- zh-CN.js   # 简体中文翻译
├── assets/                # 文件会被 Webpack 处理，这意味着它们可以享受到模块化和优化的好处
|   |-- styles/
|     	|-- base/
|	  				|-- _reset.scss	#重置浏览器默认样式
|						|-- _typography.scss  # 定义字体样式等
|				|-- components/
|						|-- _buttons.scss     # 按钮样式
|						|-- _modals.scss      # 模态框样式
|				|-- helpers/
|						|-- _variables.scss   # 定义样式变量
|						|-- _mixins.scss      # 定义样式 mixins
|				|-- layouts/
|						|-- _grid.scss        # 网格布局样式
|						|-- _header.scss      # 头部区域样式
|						|-- _footer.scss      # 底部区域样式
|				|-- main.scss             # 主样式文件，用于导入所有样式
├── components/            # 全局可复用组件
│   ├── common/              # 基础组件，如按钮、输入框等
|-- |-- layout/ 						# 布局相关
│   ├── ui/                # UI 组件，如模态框、标签页等
│   └── ...
├── views/                 # 视图组件，对应不同的页面
│   ├── home-view/          # 主页视图组件
│   │   ├── components/    # 仅在 HomeView 中使用的组件
│   │   ├── HomeView.vue   # HomeView 的主组件
│   │   ├── use-home.js     # HomeView 的组合式 API 逻辑
│   │   └── ...
│   ├── about-view/         # 关于页面视图组件
│   └── ...
├── mocks/
|   |-- handlers.js 				 # 定义具体的请求程序
|   |-- browser.js				# 设置并导出浏览器环境下的 Service Worker
|   |-- server.js					# 设置并导出浏览器环境下的 Service Worker
|   |-- data/							# （可选）存储模拟数据的文件夹
|   |-- utils/						# （可选）存储模拟工具或助手函数的文件夹
├── router/                # 路由配置
├── store/                 # Vuex 状态管理
├── utils/                 # 工具函数
|-- tests/
|			|-- unit/			# 含针对项目中各个独立单元（如组件、帮助函数等）的测试
|						|--components/
|								|-- MyComponent.spec.js
|						|-- helpers/
|								|-- utility.spec.js
|			|--e2e/				# 端到端测试
|					|-- MyComponent.e2e.js
├── App.vue                # 根组件
└── main.js                # 入口文件

 

  • assets/：存放项目中使用的静态资源，如样式表（CSS 或 SCSS）、图片、字体文件等。
  • components/：放全局可复用的组件，这些组件可以在任何视图或其他组件中使用。
    • base/：基础组件，如按钮、输入框、标签等，这些组件通常不包含业务逻辑，是纯粹的展示性组件。
    • ui/：用户界面组件，如模态框、滑块、标签页等，这些组件可能包含一些内部状态或逻辑。
  • views/：存放与路由对应的视图组件，通常是页面级别的组件。
    • 每个视图可以有自己的 components/ 目录，用于存放只在该视图中使用的私有组件。
    • 视图组件可以有自己的组合式 API 逻辑文件，如 use-home.js，这有助于将逻辑与视图分离，更好地利用 Vue 3 的组合式 API。
  • 扩展目录：随着项目的增长，可能需要添加更多的目录来组织的文件，例如 directives/、mixins/ 或 plugins/ 等。
相关推荐