vue命名规范
-
文件和文件夹的命名:
- 文件夹命名: Vue 项目中通常可以根据功能或页面来划分文件夹。例如,您可以为每个页面创建一个文件夹,并将相关的组件、样式和资源文件放在其中。文件夹的命名最好使用短横线分隔的小写字母(kebab case)命名,例如:
user-profile
。 - Vue 单文件组件命名: 组件的命名最好使用 PascalCase(首字母大写驼峰命名法),并以
.vue
结尾。例如:UserProfile.vue
。 - 普通 JavaScript 文件命名: 如果是工具函数、配置文件等普通的 JavaScript 文件,命名可以使用 camelCase(驼峰命名法),例如:
apiUtils.js
。
- 文件夹命名: Vue 项目中通常可以根据功能或页面来划分文件夹。例如,您可以为每个页面创建一个文件夹,并将相关的组件、样式和资源文件放在其中。文件夹的命名最好使用短横线分隔的小写字母(kebab case)命名,例如:
-
文件和文件夹的组织:
- 布局和菜单: 通常,布局文件和菜单相关的组件可以放在一个专门的文件夹中,例如
layouts
。您可以在其中创建一个名为DefaultLayout.vue
的布局组件,然后在其他页面中引用它。 - 页面组件: 每个页面应该有一个单独的文件夹,并在其中放置页面的 Vue 单文件组件,以及可能的样式、图片等资源。这有助于将每个页面的相关内容分组在一起,便于维护和查找。例如:
views/UserProfile/UserProfile.vue
。 - 共享组件: 如果某个组件会在多个页面或布局中重复使用,可以将其放在一个
components
文件夹中,并在需要的地方引用。例如:components/Button/Button.vue
。 - 路由配置: 将路由配置文件(通常是一个名为
router.js
或类似的文件)放在项目的根目录下。
- 布局和菜单: 通常,布局文件和菜单相关的组件可以放在一个专门的文件夹中,例如
-
页面组件 vs. 共享组件:
- 页面组件: 页面组件是特定页面的一部分,通常包含与该页面直接相关的业务逻辑和视图。它们可能会引用共享组件来构建页面的不同部分。
- 共享组件: 共享组件是可以在多个页面中重复使用的组件,例如按钮、表单字段、模态框等。它们通常比较通用,独立于特定页面的业务逻辑。
-
模块化和命名空间:
- 在组件的
data
、methods
等属性中,尽量使用命名空间来防止命名冲突。例如,在data
中使用userProfile
而不是user
,以避免与其他组件中的相同名称产生冲突。
- 在组件的
-
样式:
- 每个页面或组件的样式文件可以放在相应的文件夹内,或者与组件文件放在同一目录下。这可以根据个人和项目的偏好来决定。最重要的是保持一致性。
- 使用合理的样式命名和组织,例如 BEM(块、元素、修饰符)命名法,以提高可读性和维护性。
-
公共资源:
- 公共资源如全局样式、字体、图标等可以放在公共目录下,以便整个项目共享。
例子:比如我有整个页面的布局为三个容器 上面一个最上面的头部栏 左侧是菜单 右边内容 那么这三个页面应该放在哪个文件夹里呢
对于这种整体页面布局,您可以将不同部分的容器分别放在不同的文件夹中,以便更好地组织和管理。以下是一个建议的布局:
-
头部栏:
- 创建一个名为
layouts
的文件夹,用于存放布局相关的组件。 - 在
layouts
文件夹中创建一个名为Header.vue
的组件文件,用于定义头部栏的内容和样式。
- 创建一个名为
-
菜单:
- 在
layouts
文件夹中,创建一个名为Sidebar.vue
的组件文件,用于定义菜单栏的内容和样式。
- 在
-
内容区域:
- 在
views
文件夹中,创建一个名为Dashboard
的文件夹,用于存放整体页面的内容区域。 - 在
Dashboard
文件夹中,创建一个名为Dashboard.vue
的组件文件,用于定义整体页面的内容部分。
- 在
最终的项目目录结构可能如下所示:
src/
|-- components/
| |-- ...
|-- layouts/
| |-- Header.vue
| |-- Sidebar.vue
|-- views/
| |-- Dashboard/
| |-- Dashboard.vue
| |-- ...
|-- App.vue
|-- main.js
|-- ...
在上述结构中,Header.vue
负责头部栏的内容,Sidebar.vue
负责菜单栏的内容,Dashboard.vue
负责整体页面的内容。这种结构使得不同部分的代码更容易维护,并且可以在需要的地方引用这些布局和页面组件。
在 App.vue
中,您可以组合这些组件,构建整体的页面布局。例如
<template><div><Header /><div class="main-content"><Sidebar /><Dashboard /></div></div>
</template><script>
import Header from '@/layouts/Header.vue';
import Sidebar from '@/layouts/Sidebar.vue';
import Dashboard from '@/views/Dashboard/Dashboard.vue';export default {components: {Header,Sidebar,Dashboard}
};
</script><style>
.main-content {display: flex;
}
</style>
这样,您可以在 App.vue
中组合头部栏、菜单和内容区域,创建整体页面布局。整个项目的结构更清晰,各部分的功能和样式相互隔离,更易于维护和扩展。
常见的HTML和CSS命名规范
HTML Class 命名规范:
1、BEM (Block Element Modifier) 命名法: BEM是一种流行的HTML和CSS命名约定,它通过明确的命名约定来定义块(Block)、元素(Element)和修饰符(Modifier)。这有助于创建自解释且高度可重用的代码。例如:
<div class="header"><div class="header__logo"></div><div class="header__menu"></div><div class="header__menu--active"></div>
</div>
2、命名约定: 使用有意义的名词或形容词来描述元素的功能或外观。避免使用单词缩写、不清晰的名字或过于简单的名字。
3、避免样式与功能的混淆: 尽量避免使用表示样式的类名,而应该关注于元素的功能。例如,不要使用 red-text
,而是使用 error-message
。
4、可读性: 使用连接符(短划线或下划线)将多个单词组合,以提高可读性。例如,header-section
或 header_section
。
CSS 命名规范:
1、类名前缀: 在类名前加上适当的前缀,以避免类名冲突。例如,可以使用项目的缩写或者模块名称作为前缀。
2、避免具体样式: 类名应该描述元素的功能或用途,而不是具体的样式。例如,不要使用 big-red-button
,而是使用 cta-button
。
3、语义化: 使用有意义的类名,以便在不查看样式的情况下也能理解其含义。
4、避免嵌套选择器的过度深度: 避免使用过深的选择器嵌套,以减少样式耦合和维护难度。
-
重用: 尽量设计可重用的类名,以减少重复的样式定义。
相关文章:
vue命名规范
文件和文件夹的命名: 文件夹命名: Vue 项目中通常可以根据功能或页面来划分文件夹。例如,您可以为每个页面创建一个文件夹,并将相关的组件、样式和资源文件放在其中。文件夹的命名最好使用短横线分隔的小写字母(kebab …...
第05天 SpringBoot自动配置原理
✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏:每天一个知识点 ✨特色专栏:…...
AlphaZero能否从围棋和国际象棋飞跃到量子计算?
一项新的研究表明,DeepMind惊人的游戏算法AlphaZero可以帮助释放量子计算的力量和潜力。 自两年多前出现以来,AlphaZero一再证明了其快速学习能力,将自己提升到围棋,国际象棋和将棋(日本象棋)的特级大师级别…...
进程切换
进程切换 上下文切换上下文切换的消耗上下文切换与模式切换 对于通常的进程而言,其创建、撤销及要求由系统设备完成的IO操作,都是利用系统调用而进入内核,再由内核中的相应处理程序予以才完成的。进程切换同样是在内核的支持下实现的…...
ES踩坑记录之UNASSIGNED分片无法恢复
问题背景 换节点 我们线上有一套ES集群,三台机器,共运行了6个节点。一直在线上跑了几个月也一直没出什么问题。然而好巧不巧,就在昨天,集群中的3号节点磁盘出现故障,导致机器直接瘫痪。本来大家觉得问题不大…...
ubuntu更换国内apt源
ubuntu必备操作 1 更换apt镜像源 备份镜像 cp /etc/apt/sources.list /etc/apt/sources.list.bak查看自己ubuntu版本 # 查看自己的codename #查看自己的ubuntu版本[注意关注:DISTRIB_CODENAME,发行代号] cat /etc/*release# DISTRIB_CODENAMEcosmic …...
OpenCV-Python中的图像处理-视频分析
OpenCV-Python中的图像处理-视频分析 视频分析Meanshift算法Camshift算法光流Lucas-Kanade Optical FlowDense Optical Flow 视频分析 学习使用 Meanshift 和 Camshift 算法在视频中找到并跟踪目标对象: Meanshift算法 Meanshift 算法的基本原理是和很简单的。假设我们有一堆…...
STM32 CubeMX (第四步Freertos内存管理和CPU使用率)
STM32 CubeMX STM32 CubeMX (第四步Freertos内存管理和CPU使用率) STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1(不要选择滴答定时器;滴答定时器留给OS系统做时基)使用STM32 CubeMX 库,配置Fr…...
题解 | #1012.Equalize the Array# 2023杭电暑期多校10
1012.Equalize the Array 签到 题目大意 定义一个数组的 m o d e mode mode 是其中出现次数最多的数字(可不唯一) 给定一个数组 a a a ,每次操作可以选定其一个 m o d e mode mode 并使数组中所有与之相等的元素 1 1 1 问任意次操作后…...
UE4/5C++多线程插件制作(二十一、使用)
目录 DemoPawn.h DemoPawn.cpp 会出现的bug 插件 相关的插件制作在上一节已经完成了。 具体的使用方式在第0章已经写了,get之后去绑定即可。 而后笔者做了一个接口,具体的绑定方式也就在这个接口里面。 接下来最重要的是进行使用,对此我做了一个与蓝图相关的接口,里…...
【C#】关于?的用法
1、可空类型修饰符(?) 如: int? x null;//可空类型默认值都是null,而值类型如int默认值为0、bool默认值为false等 bool? result true;2、三目运算符(?:) 如: bool…...
linux——mysql的高可用MHA
目录 一、概述 一、概念 二、组成 三、特点 四、工作原理 二、案例 三、构建MHA 一、基础环境 二、ssh免密登录 三、主从复制 master slave1 四、MHA安装 一、环境 二、安装node 三、安装manager 一、概述 一、概念 MHA(MasterHigh Availability&a…...
【学习日记】【FreeRTOS】空闲任务与阻塞延时
写在前面 本文是基于野火 RTOS 教程对空闲任务和阻塞延时的详解。 一、什么是任务中的阻塞延时 说到阻塞延时,笔者的第一反应就是在单片机的 while 循环中,使用一个 for 循环不断递减一个大数,通过 CPU 不断执行一条指令的耗时进行延时。这…...
衣服材质等整理(时常更新)
参考文章&图片来源 https://zhuanlan.zhihu.com/p/390341736 00. 天然纤维 01. 化学纤维 02. 聚酯纤维(即,涤纶) 一种由有机二元酸和二元醇通过化学缩聚制成的合成纤维。具有出色的抗皱性和保形性,所制衣物在穿着过程中不容…...
电子商务环境下旅游价值链
迈克尔 ・ 波特(Michael E. Porter)在其《竞争优势》一书中提出了“价值链” 的概念,并认为一家企业最核心的竞争优势在于对价值链的设计。虽然迈克尔 ・ 波 特提出的价值链主要是针对企业内部的价值链,但他视价值链为一系列连续完成的 活动ÿ…...
spring源码分析bean的生命周期(下)
doGetBean()执行过程 createBean()执行过程 一、DependsOn注解 spring创建对象之前会判断类上是否加了DependsOn注解,加了会遍历然后会添加到一个map中,spring会先创建DependsOn注解指定的类 二、spring类加载器 在合并BeanDefinition,确定…...
完美解决Github提交PR后报错:File is not gofumpt-ed (gofumpt)
问题阐述 最近在Github上提交PR后,遇到了这么一个问题:golangci-lint运行失败,具体原因是File is not gofumpt-ed (gofumpt)。 名词解释 golangci-lint: golangci-lint 是Go语言社区中常用的代码质量检查工具,它可以…...
pytorch3d成功安装
一、pytorch3d是什么? PyTorch3D的目标是帮助加速深度学习和3D交叉点的研究。3D数据比2D图像更复杂,在从事Mesh R-CNN和C3DPO等项目时,我们遇到了一些挑战,包括3D数据表示、批处理和速度。我们开发了许多有用的算子和抽象…...
【vue3】同个页面引入多个图表组件实现自适应的方法
首先说明,此方案仅针对vue3项目在同一个页面引入了多个图表组件,因为我发现不能框架不同的引入,resize的写法还不同 window.addEventListener("resize", function() {...// 在此处重新调用即可 }以下是具体写法: 循环…...
一文了解汽车芯片的分类及用途介绍
汽车芯片按其功能可分为控制类(MCU和AI芯片)、功率类、传感器和其他(如存储器)四种类型。市场基本被国际巨头所垄断。人们常说的汽车芯片是指汽车里的计算芯片,按集成规模可分为MCU芯片和AI芯片(SoC芯片&am…...
Linux0.11内核源码解析-truncate.c
truncate文件只要实现释放指定i节点在设备上占用的所有逻辑块,包括直接块、一次间接块、二次间接块。从而将文件节点对应的文件长度截为0,并释放占用的设备空间。 索引节点的逻辑块连接方式 释放一次间接块 static void free_ind(int dev,int block) {…...
LED驱动型IC芯片的原理介绍
一、LED驱动器是什么 LED驱动器(LED Driver),是指驱动LED发光或LED模块组件正常工作的电源调整电子器件。由于LED PN结的导通特性决定,它能适应的电源电压和电流变动范围十分狭窄,稍许偏离就可能无法点亮LED或者发光效…...
VLAN实验
实验题目如下: 实验拓扑如下: 实验要求如下: 【1】PC1/3的接口均为access模式,且属于van2,在同一网段 【2】PC2/4/5/6的IP地址在同一网段,与PC1/3不在同一网段 【3】PC2可以访问4/5/6,PC4不能…...
Qt应用开发(基础篇)——高级纯文本窗口 QPlainTextEdit
一、前言 QPlainTextEdit类继承于QAbstractScrollArea,QAbstractScrollArea继承于QFrame,是Qt用来显示和编辑纯文本的窗口。 滚屏区域基类https://blog.csdn.net/u014491932/article/details/132245486?spm1001.2014.3001.5501框架类QFramehttps://blo…...
三维可视化平台有哪些?Sovit3D可视化平台怎么样?
随着社会经济的发展和数字技术的进步,互联网行业发展迅速。为了适应新时代社会发展的需要,大数据在这个社会经济发展过程中随着技术的进步而显得尤为重要。同时,大数据技术的快速发展进程也推动了可视化技术的飞速发展,国内外各类…...
Xxl-job安装部署以及SpringBoot集成Xxl-job使用
1、安装Xxl-job: 可以使用docker拉取镜像部署和源码编译两种方式,这里选择源码编译安装。 代码拉取地址: https://github.com/xuxueli/xxl-job/tree/2.1.2 官方开发文档: https://www.xuxueli.com/xxl-job/#%E3%80%8A%E5%88%…...
【【超声波避障小车代码】】
超声波避障小车代码 #include <reg51.h> //通用51头文件 #include <intrins.h> //使用了_nop()_函数#define uchar unsigned char //用 uchar 表示 unsigned char 类型 #define uint unsigned int //用 uint 表示 unsigned int 类型sbit EN…...
TDI(Time Delay Integration)
TDI(Time Delay Integration)是一种特殊的图像采集技术,常用于线阵CCD(Charge-Coupled Device)相机。TDI技术可以在保持高分辨率的同时增强图像的信噪比(Signal-to-Noise Ratio, SNR)࿰…...
RHCE——一、安装部署及例行性工作
RHCE 一、网络服务1、准备工作2、RHEL9操作系统的安装部署3、配置并优化RHEL9操作系统4、网络配置5、修改网络连接 二、例行性工作1、单一执行的例行性工作2、循环执行的例行性工作 三、书写定时任务的注意事项四、系统级别的计划任务五、实验1、实验一:编写脚本tes…...
服务器数据库中了360后缀勒索病毒怎么办?360后缀勒索病毒的加密形式
随着信息技术的发展,企业的计算机服务器数据库变得越来越重要。然而,在数字时代,网络上的威胁也日益增多。近期,我们收到很多企业的求助,企业的计算机服务器遭到了360后缀勒索病毒的攻击,导致服务器内的所有…...
期权就是股指期货吗,哪个好做一点?
近年来,场内ETF期权产品不断扩大,越来越多的投资者有投资期权的想法。当我们看到期权时,我们会不知不觉地想到期货,虽然期货与期权只有一个字的区别,但实际上有很大的不同,那么期权就是股指期货吗ÿ…...
week32
本周目标: Belady现象的解释 操作系统 计组IO/MM chapter 刷力扣 ubuntu磁盘/网络/命令行进阶*1 tarball之类的使用 Question 大数据系统实验要学吗? 据说课讲得不好这是一门类似数据库的课程——大数据之hadoop / hive / hbase 的区别是什么&a…...
【数据库】P1 数据库基本常识
数据库基本常识 数据库 ≠ 数据库管理系统表(Table)SQL是什么 数据库 ≠ 数据库管理系统 数据库是保存有组织的数据的容器,数据库称为 DB(DataBase);数据库管理系统是创建和操纵数据库的软件,数…...
c语言——计算两个数的乘积
//计算两个数的乘积 #include<stdio.h> #include<stdlib.h> int main() {double firstNumber,secondNumber,product;printf("两个浮点数:");scanf("%lf,%lf",&firstNumber,&secondNumber);productfirstNumber*secondNumber…...
单机模型并行最佳实践
单机模型并行最佳实践 模型并行在分布式训练技术中被广泛使用。 先前的帖子已经解释了如何使用 DataParallel 在多个 GPU 上训练神经网络; 此功能将相同的模型复制到所有 GPU,其中每个 GPU 消耗输入数据的不同分区。 尽管它可以极大地加快训练过程&…...
编程练习(3)
一.选择题 第一题: 函数传参的两个变量都是传的地址,而数组名c本身就是地址,int型变量b需要使用&符号,因此答案为A 第二题: 本题考察const修饰指针变量,答案为A,B,C,D 第三题: 注意int 型变…...
PyTorch学习笔记(十三)——现有网络模型的使用及修改
以分类模型的VGG为例 vgg16_false torchvision.models.vgg16(weightsFalse) vgg16_true torchvision.models.vgg16(weightsTrue) 设置为 False 的情况,相当于网络模型中的参数都是初始化的、默认的设置为 True 时,网络模型中的参数在数据集上是训练好…...
Python爬虫的scrapy的学习(学习于b站尚硅谷)
目录 一、scrapy 1. scrapy的安装 (1)什么是scrapy (2)scrapy的安装 2. scrapy的基本使用 (1)scrap的使用步骤 (2)代码的演示 3. scrapy之58同城项目结构和基本方法&…...
“深入解析JVM:揭秘Java虚拟机的工作原理“
标题:深入解析JVM:揭秘Java虚拟机的工作原理 摘要:本文将深入解析Java虚拟机(JVM)的工作原理,探讨其内部结构和运行机制。我们将介绍JVM的组成部分、类加载过程、内存管理、垃圾回收、即时编译等关键概念&…...
【数据结构与算法】十大经典排序算法-归并排序
🌟个人博客:www.hellocode.top 🏰Java知识导航:Java-Navigate 🔥CSDN:HelloCode. 🌞知乎:HelloCode 🌴掘金:HelloCode ⚡如有问题,欢迎指正&#…...
基于深度学习创建-表情符号--附源码
表情符号深度学习概述 如今,我们使用多种表情符号或头像来表达我们的心情或感受。它们充当人类的非语言线索。它们成为情感识别、在线聊天、品牌情感、产品评论等的关键部分。针对表情符号驱动的故事讲述的数据科学研究不断增加。 从图像中检测人类情绪非常流行,这可能是由…...
.netcore grpc的proto文件字段详解
一、.proto文件字段概述 grpc的接口传输参数都是根据.proto文件约定的字段格式进行传输的grpc提供了多种类型字段;主要包括标量值类型(基础类型)、日期时间、可为null类型、字节、列表、字典、Any类型(任意类型)、One…...
带你了解建堆的时间复杂度
目录 用向上调整建堆的时间复杂度 1.向上调整建堆的时间复杂度O(N*logN) 2.数学论证 3.相关代码 用向下调整建堆的时间复杂度 1.建堆的时间复杂度为O(N) 2.数学论证 3.相关代码 完结撒花✿✿ヽ(▽)ノ✿✿ 博主建议:面试的时候可能会被面试官问到建堆时间复杂度的证明过…...
人工智能原理(6)
目录 一、机器学习概述 1、学习和机器学习 2、学习系统 3、机器学习发展简史 4、机器学习分类 二、归纳学习 1、归纳学习的基本概念 2、变型空间学习 3、归纳偏置 三、决策树 1、决策树组成 2、决策树的构造算法CLS 3、ID3 4、决策树的偏置 四、基于实例的学习…...
单片机模块化编程文件创建流程
一、在工程文件夹下创建一个新的文件夹,命名为“ModulesCodesFiles”,译为“模块化代码文件”,用于存放所有模块化代码文件。 二、在“ModulesCodesFiles”文件夹下为每个模块创建一个新的文件夹,命名为模块的名称,例…...
docker image
docker image 1. 由来 docker image是Docker容器管理工具中的一个命令,用于管理和操作Docker镜像。 2. 常见五种示例命令和说明 以下是docker image的常见示例命令及其说明: 示例一:列出所有镜像 docker image ls描述:使用d…...
力扣75——单调栈
总结leetcode75中的单调栈算法题解题思路。 上一篇:力扣75——区间集合 力扣75——单调栈 1 每日温度2 股票价格跨度1 - 2 解题总结 1 每日温度 题目: 给定一个整数数组 temperatures ,表示每天的温度,返回一个数组 answer &…...
Webpack和Parcel详解
构建工具和打包器是在开发过程中帮助组织、优化和打包项目的工具。它们可以处理依赖管理、资源优化、代码转换等任务,从而使开发流程更高效。以下是关于构建工具和打包器的一些指导: **Webpack:** Webpack 是一个功能强大的模块打包器&#…...
linux系统服务学习(六)FTP服务学习
文章目录 FTP、NFS、SAMBA系统服务一、FTP服务概述1、FTP服务介绍2、FTP服务的客户端工具3、FTP的两种运行模式(了解)☆ 主动模式☆ 被动模式 4、搭建FTP服务(重要)5、FTP的配置文件详解(重要) 二、FTP任务…...
7.原 型
7.1原型 【例如】 另外- this指向: 构造函数和原型对象中的this都指向实例化的对象 7.2 constructor属性 每个原型对象里面都有个constructor属性( constructor构造函数) 作用:该属性指向该原型对象的构造函数 使用场景: 如果有多个对象的方法&#…...