【React】Vite 构建 React

项目搭建

vite 官网:Vite

跟着文档走即可,选择 react ,然后 ts + swc。

着重说一下 package-lock.json 这个文件有两个作用:

  • 锁版本号(保证项目在不同人手里安装的依赖都是相同的,解决版本冲突的问题)
  • 缓存(依赖的名字 + version + resolved ==> 生成一个 hash 值,然后这个 hash 值会与 integrity 的 hash 比较,相同的话直接使用目录中的 node_modules 包,不需要额外的下载 )

还有就是 package.json 中的 private 设置为 true,可以保证我们不会错误的将自己的项目发布到 npm 官网上。

src/vite-env.d.ts 中的三斜线指令用于引入类型声明,比如各种预处理器,各种文件后缀的类型等。

createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>,
)

这里使用的 ! 是非空断言,用于“欺骗”编译器我们的变量不为空,减少不必要的 ts 类型校验。

public目录的资源编译之后会存放到根目录,而静态资源assets是会随着项目一起打包的,public则不会被编译。

当我们 dev 编译项目后,public 中的文件会被放到项目的根目录下,这就是为什么我们可以直接在项目中路径中访问,也可以直接进行 ajax 发送请求获取。所以,public 下的文件 不会被编译,而 assets 下的文件会被编译。

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

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

相关文章

[数据集][目标检测]石油泄漏检测数据集VOC+YOLO格式6633张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;6633 标注数量(xml文件个数)&#xff1a;6633 标注数量(txt文件个数)&#xff1a;6633 标注…

吐血整理 ChatGPT 3.5/4.0 新手使用手册~ 【2024.09.04 更新】

以前我也是通过官网使用&#xff0c;但是经常被封号&#xff0c;就非常不方便&#xff0c;后来有朋友推荐国内工具&#xff0c;用了一阵之后&#xff0c;发现&#xff1a;稳定方便&#xff0c;用着也挺好的。 最新的 GPT-4o、4o mini&#xff0c;可搭配使用~ 1、 最新模型科普&…

【Qt】qt发布Release版本,打包.exe可执行文件

前言&#xff1a;Qt编译的可执行程序&#xff0c;如果直接运行&#xff0c;会出现0xc000007b报错&#xff0c;或者“由于占不到Qt5Network.dll,无法继续执行代码。重新安装程序可能会解决此问题”的报错&#xff0c;因为缺少相关的依赖包和动态库。 1、第一步&#xff1a;找到…

从电商行业的变化引出未来技术趋势

时间&#xff1a;2024年09月08日 作者&#xff1a;小蒋聊技术 邮箱&#xff1a;wei_wei10163.com 微信&#xff1a;wei_wei10 音频地址&#xff1a;喜马拉雅 希望大家帮个忙&#xff01;如果大家有工作机会&#xff0c;希望帮小蒋推荐一下&#xff0c;小蒋希望遇到一个认真…

Android 系统源码项目加载预编好的so库

Android 系统源码项目加载预编好的so库 文章目录 Android 系统源码项目加载预编好的so库一、前言二、源码中加载so1、Android.mk加载so加载so的主要相关代码&#xff1a; 2、Android.bp加载so&#xff08;1&#xff09;Android.mk使用源码命令编译成Android.bp&#xff08;2&am…

【C++】STL容器详解【下】

目录 一、list容器 1.1 list基本概念 1.2 lsit构造函数 1.3 list数据元素插入和删除操作 1.4 list大小操作 1.5 list赋值操作 1.6 list数据的存取 1.7 list反转排序 二、set/multiset容器 2.1 set/multiset基本概念 2.2 set构造函数 2.3 set赋值操作 2.4 set大小操…

Hash Table、HashMap、HashSet学习

文章目录 前言Hash Table&#xff08;散列表&#xff09;基本概念散列函数散列冲突&#xff08;哈希碰撞&#xff09;拉链法红黑树时间复杂度分析 HashMap基础方法使用基本的增删改查其他的方法 实现原理 HashSet基础操作去重原理 前言 本文用于介绍关于Hash Table、HashMap、…

Unity解析XML开发随机名字生成模块

概述 在游戏开发中,自动生成具有真实感的角色名字是一项常见的需求,特别是在MMORPG或者RPG游戏中。本篇博客将介绍如何利用Unity结合XML配置文件来实现一个随机名字生成模块。我们将从头开始逐步构建这一功能,并详细解释每一步的技术细节。 技术模块介绍 1. XML解析 XML…

【qt】多线程实现倒计时

1.界面设计 设置右边的intvalue从10开始倒计时 2.新建Thread类 新建Thread类&#xff0c;使其继承QThread类&#xff0c;多态重写run函数&#xff0c;相当于线程执行函数 3.重写run函数 重写run函数&#xff0c;让另一个进程每隔1s发出一个信号&#xff0c;主线程使用conne…

uniapp 全屏日历,动态无限加载

不好用请移至评论区揍我 原创代码,请勿转载,谢谢! 注:本人仅在微信小程序测试过,未在其他app/h5尝试过,按理说应该是可以的,代码没有引用任何第三方组件 日历中每个日期下方的空白部分均可自定义,写在代码中的<view class="item">我是内容</view>…

Prometheus 服务监控

目录 Prometheus 是什么 Prometheus 的特点 Prometheus 的组件 Prometheus 的指标 Prometheus 的使用场景 Prometheus 的安装 方式一&#xff1a;压缩包方式安装 方式二&#xff1a;Docker 方式安装 Prometheus 的 Web UI 面板介绍 Prometheus 目录结构介绍 Prometh…

开源可视化大屏superset Docker环境部署

superset 开源可视化大屏Docker环境部署 前言 superset是俄罗斯开源的一款可视化大屏&#xff0c;用于数据可视化探索&#xff0c;含有丰富的图表组件&#xff0c;可以支持接入各种数据源。 接触superset就是想体验下可视化大屏功能&#xff0c;想最快速度安装成功&#xff…

Linux seq命令

参考资料 知っておくとちょっと便利&#xff01;seq コマンドの使い方をご紹介 目录 一. 基本语法二. 选项2.1 -f 格式化输出2.2 -s 指定分隔符2.3 -w 输出数字补齐宽度 三. 小案例3.1 递减序列3.2 批量创建测试文件3.3 批量下载文件 一. 基本语法 seq [OPTION] 结束值 seq […

简单的Linux Ftp服务搭建

简单的Linux FTP服务搭建 1.需求 公司有一个esb文件传输代理&#xff0c;其中我们程序有文件传输功能&#xff0c;需要将本地文件传输到esb文件代理服务器上&#xff0c;传输成功之后发送http请求&#xff0c;告知esb将固定文件进行传输到对应外围其他服务的文件目录中&#…

unity GridLayoutGroup真正的居中

GridLayoutGroup默认的居中效果: 不是真正的居中 加上代码: namespace UnityEngine.UI {/// <summary>/// GridLayoutGroup拓展&#xff0c;使支持自定义内容/// </summary>internal class GridLayoutGroupEx : GridLayoutGroup{/// <summary>/// 启用居中/…

人生苦短我用Python pandas文件格式转换

人生苦短我用Python pandas文件格式转换 前言示例1 excel与csv互转常用格式的方法Flat fileExcelJSONXML 示例2 常用格式转换简要需求依赖export方法main方法 附其它格式的方法HTMLPicklingClipboardLatexHDFStore: PyTables (HDF5)FeatherParquetORCSASSPSSSQLGoogle BigQuery…

香橙派转换模型以及在开发板上部署

新手小白记录一下自己使用香橙派模型转换以及在开发板上运行的过程&#xff0c;防止后面忘记。 使用的开发板&#xff1a;Orange Pi 5 Plus&#xff08;rk3588&#xff09; 官方的一些资料在&#xff08;主要参考用户手册&#xff09;&#xff1a;Orange Pi - Orangepihttp:/…

Pytest夹具autouse参数使用。True表示会自动在测试中使用,而无需显式指定

1. 全局conftest文件日志记录功能 # 当前路径(使用 abspath 方法可通过dos窗口执行) current_path os.path.dirname(os.path.abspath(__file__)) # 上上级目录 ffather_path os.path.abspath(os.path.join(current_path,"../"))LOG_FILE_PATH f{ffather_path}/lo…

【视频讲解】Python贝叶斯卷积神经网络分类胸部X光图像数据集实例

全文链接&#xff1a;https://tecdat.cn/?p37604 分析师&#xff1a;Yuanchun Niu 在人工智能的诸多领域中&#xff0c;分类技术扮演着核心角色&#xff0c;其应用广泛而深远。无论是在金融风险评估、医疗诊断、安全监控还是日常的交互式服务中&#xff0c;有效的分类算法都是…

科研绘图系列:R语言富集散点图(enrichment scatter plot)

介绍 富集通路散点图(Enrichment Pathway Scatter Plot)是一种数据可视化工具,用于展示基因集富集分析(Gene Set Enrichment Analysis, GSEA)的结果。 横坐标是对应基因名称,纵坐标是通路名称,图中的点表示该基因在某个通路下的qvalue,可以简单理解为不同环境下的贡献…