【开发规范】前端开发中引用文件的方式

1. 介绍

在前端开发中,使用别名引用文件和使用相对路径引用文件是两种不同的方式,它们通常用于引用模块、组件或资源文件。这两种方式的区别主要在于它们的含义和用途。

2. 使用别名引用文件

@ 符号通常是一种别名,表示项目的根路径或者某个特定目录的路径。这通常是通过Webpack或其他构建工具配置的别名,以简化文件引用路径并提高代码可维护性。

使用 @ 可以使引用更加简洁,而且如果项目目录结构发生变化,只需调整构建工具的配置,而不需要修改大量代码,从而降低项目维护成本及迁移难度。

示例:

import MyComponent from '@/components/MyComponent';

在Webpack中配置别名是通过使用resolve.alias来实现的。添加别名的Webpack配置示例如下:

const path = require('path');module.exports = {// 其它配置项...resolve: {alias: {'@': path.resolve(__dirname, 'src'), // '@' 别名代表 'src' 目录},},
};

3. 使用相对路径引用文件

引用文件还可以通过相对路径的方式来实现。‘…/…/’表示相对路径,其中每个‘…/’表示向上一级目录移动一层。这是一种相对于当前文件所在位置的路径引用方式。

相对路径的优点是相对于当前文件的位置更容易理解,但是在大型项目中可能会导致路径较长,且在文件移动时需要进行相对路径的调整。

示例:

import MyComponent from '../../components/MyComponent';

4. 总结

  • 别名 ‘@’ 引用文件更具可读性和可维护性;
  • 相对路径 ‘…/…/’ 引用文件能够更直接地表示相对路径;
  • 通常来说,在大型项目中,使用 ‘@’ 引用文件是一种更现代和推荐的做法。

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

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

相关文章

Kettle 浅入浅出

前言 最近又要迭代客户定制化的数据处理系统了。提到数据处理,不禁想到了以前使用过的 ETL 处理工具 Kettle。本文将对 Kettle 做一些简单的介绍。 Kettle 介绍 在介绍 Kettle 前先了解下什么是 ETL,ETL 是 Extract-Transform-Load 的缩写&#xff0c…

Django回顾1

目录 1.c/s架构 2.b/s架构 3.基于socket写一个web应用 main.py index.html 4.手写web框架 main.py login.html time.html user_list.html user_list_new 二.HTTP协议 1.什么是HTTP协议 2.HTTP协议的作用 3.HTTP版本及区别 4.HTTP协议的特点 5.HTTP请求协议 常…

腹泻的原因,种类,风险因素,如何预防

谷禾健康 腹泻是常见的健康问题,相信绝大多数人在生活中都曾遭受过腹泻的困扰。 根据2016年柳叶刀期刊统计,慢性腹泻影响全世界 3%-20% 的成年人。全球每年有17亿儿童腹泻病例,腹泻是五岁以下儿童死亡的第五大原因,每年约有52.5万…

P1 什么是链表 C语言简单易懂

目录 前言 01 什么是链表 02 数组的特点 03 数组的缺点 3.1 删除数组其中一个元素 3.2 数组增加某个节点 04 链表 前言 🎬 个人主页:ChenPi 🐻推荐专栏1: 《 C 》✨✨✨ 🔥 推荐专栏2: 《 Linux C应用编程(概念…

如何在Ubuntu上清理缓存和垃圾文件

随着时间的推移,Ubuntu系统上可能会积累大量的缓存和垃圾文件,占据宝贵的磁盘空间,同时也可能影响系统性能。为了确保系统保持高效运行并释放磁盘空间,我们可以定期执行清理操作。在本文中,我们将介绍一些常见的清理步…

Leetcode98 验证二叉搜索树

题意理解: 首先明确二叉树的定义,对于所有节点,根节点的值大于左子树所有节点的值,小于右子树所有节点的值。 注意一个误区: 根节点简单和左孩子,右孩子比大小是不够的,要和子树比,…

2024年天津天狮学院专升本专业课考试报名通知

天津天狮学院2024年高职升本科专业课报名时间考试时间通知 1.报名条件 报名条件和具体要求按照天津市招生委员会的文件规定执行。考生必须完成文化课报名环节,且填报天津天狮学院志愿,方可报考我校专业课考试。考生提供的各种证件应真实有效&#xff0…

数据结构和算法-树和二叉树的定义和基本术语和性质

文章目录 树的基本概念和相关术语相关的应用节点间的关系描述节点,树的属性描述有序树vs无序树树vs森林小结 树的相关性质考点1考点2考点3考点4考点5考点6小结 二叉树的相关概念和基本术语重要 (五种状态)特殊二叉树小结 二叉树的相关性质二叉…

css深度选择器>>>、/deep/ 、::v-deep 、:deep()

很多vue的组件库 , 如vant,elementUI, iview等都可能自定义样式。 如项目中用到了 elementui,如果使用预处理器 scss, sass,less , 修改样式可能修改不掉, 而且这种需求出现的频率非常高。但如果去掉scoped话又会影响全局样式。当然我们知道可…

设计模式之美学习笔记-理论篇1-面向对象的特性

一、设计模式前言 面向对象 主流的编程范式或者是编程风格有三种,它们分别是面向过程、面向对象和函数式编程。面向对象这种编程风格又是这其中最主流的。现在比较流行的编程语言大部分都是面向对象编程语言。大部分项目也都是基于面向对象编程风格开发的。面向对…

中职组网络安全-FTPServer20221010.img(环境+解析)

任务环境说明: √服务器场景:FTPServer20221010.img √服务器操作系统:未知(关闭链接) √FTP用户名:attack817 密码:attack817 1.分析attack.pcapng数据包文件,通过分析数据包attack…

elasticsearch聚合、自动补全、数据同步

目录 一、数据聚合1.1 聚合的种类1.2 DSL实现聚合1.2.1 Bucket聚合语法1.2.2 聚合结果排序1.2.3 限定聚合范围1.2.4 Metric聚合语法 1.3 RestAPI实现聚合 二、自动补全2.1 拼音分词器2.2 自定义分词器2.3 自动补全查询2.4 RestAPI实现自动补全 三、数据同步3.1 思路分析3.1.1 同…

哈希表Leetcode 1657. 确定两个字符串是否接近

如果可以使用以下操作从一个字符串得到另一个字符串,则认为两个字符串 接近 : 操作 1:交换任意两个 现有 字符。 例如,abcde -> aecdb操作 2:将一个 现有 字符的每次出现转换为另一个 现有 字符,并对另…

PCP的Parallel Repetition

1. 引言 见Alessandro Chiesa等人2023年论文《On Parallel Repetition of PCPs》。 Parallel Repetition(并行重复)可用于: 降低probabilistic proofs的soundness error 的同时提升某些衡量指标的效率 interactive proofs(IPs…

模型层——多表操作

多表操作 一 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄。 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息。作者详情模型和作…

YOLOv5全网独家首发改进:SENetv2,Squeeze-Excitation模块融合Dense Layer,效果秒杀SENet

💡💡💡本文自研创新改进:SENet v2,针对SENet主要优化点,提出新颖的多分支Dense Layer,并与Squeeze-Excitation网络模块高效融合,融合增强了网络捕获通道模式和全局知识的能力 推荐指数:五星 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/catego…

项目申请书撰写【笔记】

撰写项目申请书需要良好的科技写作技能。好的项目申请书应该条理清 晰、逻辑严密。整份申请 书要有清晰的结构,每部分都有特定的功能,让项目评审人觉得一目了 然。每一段话也要有特定的功能,表达要有层次和递进。要注意起承转合、文脉通畅&am…

【24押题卷】小马哥终极押题3+1!

告别11月,迎接12月!说来也是缘分,各平台发了快200套真题,梳理了6本教材课后习题,讲解了吴大正、郑君里、奥本三本重点习题。终于我“悟了”,你们会发现,我今年做的每一套真题解析,几…

Linux Ubuntu protobuf 安装方法

文章目录 安装方法检验安装意外状况 安装方法 去GitHub官网找下载地址 安装 protobuf 21.11 GitHub 资源地址 选择安装版本 (是一个URL网址) 例如这里选用:protobuf-all-21.11.zip 资源 安装依赖库,执行指令 6. sudo apt-get …

【Node.js】笔记整理4 - 版本管理工具nvm

写在最前:跟着视频学习只是为了在新手期快速入门。想要学习全面、进阶的知识,需要格外注重实战和官方技术文档,文档建议作为手册使用 系列文章 【Node.js】笔记整理 1 - 基础知识【Node.js】笔记整理 2 - 常用模块【Node.js】笔记整理 3 - n…