Vue前端规范【二】

在大多数项目中，这些规则被发现可以提高可读性和/或开发人员体验。如果你违反了它们，你的代码仍然会运行，但违规应该是罕见的，而且有充分的理由。

组件文件

每当构建系统可用于连接文件时，每个组件都应位于其自己的文件中。
这有助于您在需要编辑组件或查看如何使用组件时更快地找到组件。

//坏
app.component('TodoList', {// ...
})app.component('TodoItem', {// ...
})

//好
components/
|- TodoList.js
|- TodoItem.js
//或者
components/
|- TodoList.vue
|- TodoItem.vue

单文件组件文件名大小写

单文件组件 应始终为 PascalCase 或始终为 kebab-case。
PascalCase 最适合代码编辑器中的自动完成，因为它与我们在 JS（X） 和模板中引用组件的方式一致。但是，混合大小写的文件名有时会在不区分大小写的文件系统上产生问题，这就是为什么 kebab-case 也是完全可以接受的。

//坏
components/
|- mycomponent.vue
//或者
components/
|- myComponent.vue

//好
components/
|- MyComponent.vue
//或者
components/
|- my-component.vue

基本组件名称

应用特定于应用的样式和约定的基本组件（也称为表示性组件、哑组件或纯组件）都应以特定前缀开头，例如 Base、 App或 V。

这些组件为应用程序中的一致样式和行为奠定了基础。它们可能仅包含：加粗样式

  • HTML 元素，
  • 其他基本组件，
  • 第三方 UI 组件

但它们永远不会包含全局状态（例如，来自 Pinia 存储）。
它们的名称通常包括它们包装的元素的名称（例如 BaseButton、 BaseTable），除非不存在用于其特定目的的元素（例如 BaseIcon）。如果您为更具体的上下文构建类似的组件，它们几乎总是会使用这些组件（例如 BaseButton 可用于 ButtonSubmit）。
该公约的一些优点：

  • 在编辑器中按字母顺序排列时，应用的基本组件会全部列出在一起，从而更易于识别。
  • 由于组件名称应始终为多字，因此此约定可防止您为简单的组件包装器选择任意前缀（例如 MyButton、 VueButton）。
  • 由于这些组件的使用频率非常高，因此您可能希望简单地将它们设置为全局组件，而不是将它们导入到任何地方。前缀使 Webpack 成为可能。
const requireComponent = require.context('./src',true,/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(function (fileName) {let baseComponentConfig = requireComponent(fileName)baseComponentConfig = baseComponentConfig.default || baseComponentConfigconst baseComponentName = baseComponentConfig.name || fileName.replace(/^.+\//, '').replace(/\.\w+$/, '')app.component(baseComponentName, baseComponentConfig)
})

//坏
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

//好
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
//或者
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
//或者
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

紧密耦合的组件名称

与其父组件紧密耦合的子组件应包含父组件名称作为前缀
如果组件仅在单个父组件的上下文中才有意义，则该关系应在其名称中显而易见。由于编辑器通常按字母顺序组织文件，因此这也使这些相关文件彼此相邻。

详细说明
您可能想通过将子组件嵌套在以子组件父级命名的目录中来解决此问题。例如：

components/
|- TodoList/|- Item/|- index.vue|- Button.vue|- index.vue

不建议这样做，因为它会导致：
1.许多文件具有相似的名称，这使得代码编辑器中的快速文件切换更加困难。
2.许多嵌套的子目录，这增加了在编辑器侧边栏中浏览组件所需的时间。

//坏
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
//或者
components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

//好
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
//或者
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

组件名称

组件名称应以最高级别（通常是最通用）的单词开头，并以描述性修饰单词结尾。
比如我们要形容一个好看的女孩子，在中国一般都是说：很好看的女孩子，修饰的名字放在后面，而用英语来说的话the gird is beautiful，名词在前面，对于组件命名也是这样的。把最重要的名词放在命名前面，可以一目了然。

您可能想知道：
“我们为什么要强制组件名称使用不太自然的语言？”
在自然英语中，形容词和其他描述符通常出现在名词之前，而例外则需要连接词。例如：

  • 牛奶咖啡 with
  • 的汤 of the 当天
  • 参观者 to the 博物馆

如果您愿意，您绝对可以在组件名称中包含这些连接器单词，但顺序仍然很重要。
另请注意， 被视为“最高级别”的内容将与应用的上下文相关 。例如，假设一个带有搜索表单的应用程序。它可能包括如下组件：

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

您可能会注意到，很难看出哪些组件特定于搜索。现在，让我们根据规则重命名组件：

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue

由于编辑器通常按字母顺序组织文件，因此组件之间的所有重要关系现在一目了然。
您可能想以不同的方式解决此问题，将所有搜索组件嵌套在“搜索”目录下，然后将所有设置组件嵌套在“设置”目录下。我们建议仅在非常大的应用（例如 100+ 组件）中考虑此方法，原因如下：

  • 浏览嵌套的子目录通常比滚动浏览单个子目录需要更多的时间 components 目录。
  • 名称冲突（例如，多个 ButtonDelete.vue组件），使在代码编辑器中快速导航到特定组件变得更加困难。
  • 重构变得更加困难，因为查找和替换通常不足以更新对移动组件的相对引用。
//坏
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

//好
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

自闭组件

没有内容 的组件应该在单文件组件 、字符串模板和 JSX 中自关闭，但在 DOM 模板中永远不要。
自关闭的组件传达出它们不仅没有内容，而且 意味着 没有内容。这是一本书中的空白页和标有“此页故意留空”的空白页之间的区别。 您的代码也更简洁，没有不必要的结束标记。

不幸的是，HTML 不允许自定义元素是自闭合的——只允许官方的 “void”元素 。这就是为什么只有当 Vue 的模板编译器可以在 DOM 之前到达模板，然后提供符合 DOM 规范的 HTML 时，该策略才有可能。

//坏
<!-- In Single-File Components, string templates, and JSX -->
<MyComponent></MyComponent><!-- In in-DOM templates -->
<my-component/>

//好
<!-- In Single-File Components, string templates, and JSX -->
<MyComponent/><!-- In in-DOM templates -->
<my-component></my-component>

模板中的组件名称大小写

和字符串模板中应始终为 PascalCase 在大多数项目中，组件名称在单文件组件 ，但在 DOM 模板中应为 kebab-case。
与烤肉串相比，PascalCase 有几个优点：

  • 编辑器可以在模板中自动完成组件名称，因为 JavaScript 中也使用了 PascalCase。
  • 在视觉上与单字 HTML 元素相比 ，因为有两个字符差异（两个大写字母），而不仅仅是一个字符差异（连字符）。
  • 如果你在模板中使用任何非 Vue 自定义元素，比如 Web 组件，PascalCase 会确保你的 Vue 组件保持清晰可见。

不幸的是，由于 HTML 不区分大小写，DOM 模板仍然必须使用 kebab-case。

另请注意，如果您已经在 kebab-case 上投入了大量资金，那么与 HTML 约定的一致性以及能够在所有项目中使用相同的大小写可能比上面列出的优势更重要。在这些情况下， 到处使用烤肉串也是可以接受的。

//坏
<!-- In Single-File Components and string templates -->
<mycomponent/><!-- In Single-File Components and string templates -->
<myComponent/><!-- In in-DOM templates -->
<MyComponent></MyComponent>

//好
<!-- In Single-File Components and string templates -->
<MyComponent/><!-- In in-DOM templates -->
<my-component></my-component><!-- Everywhere -->
<my-component></my-component>

全字组件名称

组件名称应优先使用完整单词而不是缩写。
编辑器中的自动补全功能使编写较长名称的成本非常低，而它们提供的清晰度是无价的。特别是，应始终避免使用不常见的缩写。

//坏
components/
|- SdSettings.vue
|- UProfOpts.vue

//好
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

defineProps名称大小写

在声明期间，道具名称应始终使用 camelCase。在 DOM 模板中使用时，props 应该是烤肉串大小写的。单文件组件模板和 JSX 可以使用 kebab-case 或 camelCase 道具。外壳应保持一致 - 如果您选择使用骆驼壳式道具，请确保在应用程序中不使用烤肉串式道具

//坏
const props = defineProps({'greeting-text': String
})

//坏
// for in-DOM templates
<welcome-message greetingText="hi"></welcome-message>

//好
const props = defineProps({greetingText: String
})

//好
// for SFC - please make sure your casing is consistent throughout the project
// you can use either convention but we don't recommend mixing two different casing styles
<WelcomeMessage greeting-text="hi"/>
// or
<WelcomeMessage greetingText="hi"/>

//好
// for in-DOM templates
<welcome-message greeting-text="hi"></welcome-message>

模板中的简单表达式

组件模板应仅包含简单的表达式，并将更复杂的表达式重构为计算属性或方法。
模板中的复杂表达式会降低其声明性。我们应该努力描述 what 应该出现什么，而不是 我们如何 计算该值。计算的属性和方法还允许重用代码。

//坏
{{fullName.split(' ').map((word) => {return word[0].toUpperCase() + word.slice(1)}).join(' ')
}}

//好
<!-- In a template -->
{{ normalizedFullName }}

//好
// The complex expression has been moved to a computed property
const normalizedFullName = computed(() =>fullName.value.split(' ').map((word) => word[0].toUpperCase() + word.slice(1)).join(' ')
)

简单的计算属性

复杂的计算属性应拆分为尽可能多的简单属性。
简单来说有三点好处

  • 更易于测试
  • 更易于阅读
  • 更能适应不断变化的需求
//坏
const price = computed(() => {const basePrice = manufactureCost.value / (1 - profitMargin.value)return basePrice - basePrice * (discountPercent.value || 0)
})

//好
const basePrice = computed(() => manufactureCost.value / (1 - profitMargin.value)
)const discount = computed(() => basePrice.value * (discountPercent.value || 0)
)const finalPrice = computed(() => basePrice.value - discount.value)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/642832.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue echarts地图

vue echarts地图

下载地图文件&#xff1a; DataV.GeoAtlas地理小工具系列 范围选择器右侧行政区划范围中输入需要选择的省份或地市&#xff0c;选择自己想要的数据格式&#xff0c;这里选择了geojson格式&#xff0c;点右侧的蓝色按钮复制到浏览器地址栏中&#xff0c;打开的geojson文件内容…
阅读更多...
gRPC-gateway使用介绍

gRPC-gateway使用介绍

gRPC-gateway 参考资料&#xff1a;gRPC-Gateway使用指南 服务中&#xff0c;使用了gRPC gateway&#xff08;代理&#xff09;来将外部的http请求映射为内部rpc调用。 proto文件示例&#xff1a; // 导入google/api/annotations.proto import "google/api/annotations…
阅读更多...
Oracle 19c rac集群管理 -------- 集群启停操作过程

Oracle 19c rac集群管理 -------- 集群启停操作过程

Oracle rac集群启停操作过程 首先查看数据库的集群的db_unique_name SQL> show parameter nameNAME TYPE VALUE ------------------------------------ ----------- --------------------------- cdb_cluster_name …
阅读更多...
Android Dialog 显示不全的问题

Android Dialog 显示不全的问题

前言&#xff1a;开发的时候发现一些运行到手机里的dialog显示不全&#xff0c;只显示一半左右 问了下chatgpt发现没有任何头绪&#xff0c;于是开始自己慢慢分析 显示去掉了原有的dialog的style发现问题解决了&#xff0c;但在原有基础上如何解决呢&#xff1f; 先看看xml&a…
阅读更多...
MYSQL之索引语法与使用

MYSQL之索引语法与使用

索引分类 分类 含义 特点 关键字 主键索引 针对表中主键创建的索引 默认自动创建&#xff0c;只能有一个 PRIMARY 唯一索引 …
阅读更多...
【UE】在控件蓝图中通过时间轴控制材质参数变化

【UE】在控件蓝图中通过时间轴控制材质参数变化

效果 步骤 1. 新建一个控件蓝图和一个材质 2. 打开材质&#xff0c;设置材质域为用户界面&#xff0c;混合模式设置为“半透明” 在材质图表中添加两个参数来控制材质的颜色和不透明度 3. 对材质创建材质实例 4. 打开控件蓝图&#xff0c;在画布面板中添加一个图像控件 将刚…
阅读更多...
DC-8靶机做题记录

DC-8靶机做题记录

靶机下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1jPMYoyFZXqr7sVMElHqGcw?pwdypq9 提取码&#xff1a;ypq9 参考&#xff1a; 【DC系列靶机DC8通关讲解】 https://www.bilibili.com/video/BV1R84y1H7rk/?share_sourcecopy_web&vd_source12088c392…
阅读更多...
二、MySQL的安装和部署

二、MySQL的安装和部署

2.0 描述 仅仅是一个产品&#xff0c;Oracle旗下的小型数据库。广泛应用在中小型项目中&#xff0c;特征体积小速度快整体成本低。尤其是开源&#xff0c;所以很多中小型项目为了降低成本纷纷选用MySql作为数控存储介质。 2.1 MySql的特征 底层语言使用C、C编写的。并且使用多…
阅读更多...
指针数组与数组指针

指针数组与数组指针

数组指针与指针数组 动态数组 扩容&#xff1a;空间不够&#xff0c;重新申请2倍大小的连续空间&#xff0c;拷贝元素后&#xff0c;释放旧空间 动态数组区别于静态数组&#xff0c;其不具备begin(),end()操作 //动态一维数组int n 10;int *a new int[n];//可以输入n值&…
阅读更多...
（完整代码）R语言中利用SVM-RFE机器学习算法筛选关键因子

（完整代码）R语言中利用SVM-RFE机器学习算法筛选关键因子

前言 自用生信代码&#xff0c; 花费一个多月写下来的。自学R以来第一次写600多行的代码。我的文章已经发表&#xff0c;如对您的研究有帮助希望可以引用一下。文章点我 SVM-RFE 主要是借助e1071包&#xff0c; 实现mSVM-REF识别并筛选关键基因&#xff0c;没有安装的小伙伴…
阅读更多...
在vue中不同组件通信方式

在vue中不同组件通信方式

1.父子组件，通过prop 2.非父子组件，通过vuex或根vue转载器 一般是以上两种情况，但是还有一种比较特殊的情况，即孙子组件或更深层次的组件通信 parent.vue<template><div class="test"><son prop="data"></son></div>…
阅读更多...
SpringBoot3（一）动力节点总结

SpringBoot3（一）动力节点总结

目录 0、有用的新特性 一、Record 1.1、Record的介绍 1.2、Record的声明 1.3、Record的创建 0、有用的新特性 JDK8-19 新增了不少新特性&#xff0c;这里我们把实际常用的新特性&#xff0c;给大家介绍一下&#xff0c;包括以下几个方面&#xff1a; Java RecordSwich 开…
阅读更多...
Gold-YOLO（NeurIPS 2023）论文与代码解析

Gold-YOLO（NeurIPS 2023）论文与代码解析

paper&#xff1a;Gold-YOLO: Efficient Object Detector via Gather-and-Distribute Mechanism official implementation&#xff1a;https://github.com/huawei-noah/Efficient-Computing/tree/master/Detection/Gold-YOLO 存在的问题 在过去几年里&#xff0c;YOLO系列已经…
阅读更多...
东南大学博士，华为上班5年，月薪达到4万4000，年终奖近10万

东南大学博士，华为上班5年，月薪达到4万4000，年终奖近10万

东南大学博士&#xff0c;华为上班5年&#xff0c;月薪达到4万4000&#xff0c;年终奖近10万 近日有华为员工爆料真实薪资&#xff0c;该网友是东南大学2018级博士&#xff0c;华为工作近5年&#xff0c;薪资达到4万4000&#xff0c;年终奖近10W。 该网友华为职场履历如下&am…
阅读更多...
Qt6入门教程 10：菜单栏、工具栏和状态栏

Qt6入门教程 10：菜单栏、工具栏和状态栏

目录 一.菜单栏 1.Qt Designer 1.1添加菜单和菜单项 1.2添加二级菜单 1.3给菜单和菜单项添加图标 1.4给菜单项添加功能 2.纯手写 二.工具栏 1.Qt Designer 1.1添加工具栏按钮 1.2工具栏的几个重要属性 2.纯手写 三.状态栏 1.Qt Designer 2.纯手写 用Qt Creator新…
阅读更多...
LeetCode-题目整理【8】：罗马数字转整数、整数转罗马数字

LeetCode-题目整理【8】：罗马数字转整数、整数转罗马数字

罗马数字转整数 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如&#xff0c; 罗马数字 2 写做 II &#xff0c;即为两个并列的 1 。12 写做 XII &#xff0c;…
阅读更多...
代码随想录训练营第三十期|第十四天|二叉树part01|● 理论基础● 递归遍历 ● 迭代遍历● 统一迭代

代码随想录训练营第三十期|第十四天|二叉树part01|● 理论基础● 递归遍历 ● 迭代遍历● 统一迭代

144. 二叉树的前序遍历 - 力扣&#xff08;LeetCode&#xff09; /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode…
阅读更多...
iptables命令详解

iptables命令详解

简介 iptables 是 Linux 系统中用于配置 IPv4 数据包过滤规则的工具。它是 Linux 内核中 Netfilter 框架的一部分&#xff0c;通过设置规则&#xff0c;可以实现网络包的过滤、NAT 转发、端口映射等功能。 基本概念 表&#xff08;Tables&#xff09;&#xff1a; filter 表…
阅读更多...
Nginx_入门

Nginx_入门

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 Nginx_入门 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、Nginx概述二、Nginx的应用…
阅读更多...
GPU与SSD间的P2P DMA访问机制

GPU与SSD间的P2P DMA访问机制

基于PCIe&#xff08;Peripheral Component Interconnect Express&#xff09;总线连接CPU、独立GPU和NVMe SSD的系统架构。 在该架构中&#xff0c;PCIe Swicth支持GPU与SSD之间快速的点对点直接内存访问&#xff08;peer-to-peer, p2p DMA&#xff09;。通常情况下&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023