当前位置: 首页 > news >正文

【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 下的文件会被编译。

相关文章:

【React】Vite 构建 React

项目搭建 vite 官网&#xff1a;Vite 跟着文档走即可&#xff0c;选择 react &#xff0c;然后 ts swc。 着重说一下 package-lock.json 这个文件有两个作用&#xff1a; 锁版本号&#xff08;保证项目在不同人手里安装的依赖都是相同的&#xff0c;解决版本冲突的问题&am…...

算法刷题:300. 最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

300. 最长递增子序列 1.dp定义&#xff1a;dp[i]表示i之前包括i的以nums[i]结尾的最长递增子序列的长度 2.递推公式&#xff1a;if (nums[i] > nums[j]) dp[i] max(dp[i], dp[j] 1); 注意这里不是要dp[i] 与 dp[j] 1进行比较&#xff0c;而是我们要取dp[j] 1的最大值…...

【linux】一种基于虚拟串口的方式使两个应用通讯

在Linux系统中&#xff0c;两个应用之间通过串口&#xff08;Serial Port&#xff09;进行通信是一种常见的通信方式&#xff0c;特别是在嵌入式系统、工业自动化等领域。串口通信通常涉及到对串口设备的配置和读写操作。以下是一个基本的步骤指南&#xff0c;说明如何在Linux中…...

并行程序设计基础——并行I/O(3)

目录 一、多视口的并行文件并行读写 1、文件视口与指针 1.1 MPI_FILE_SET_VIEW 1.2 MPI_FILE_GET_VIEW 1.3 MPI_FILE_SEEK 1.4 MPI_FILE_GET_POSTION 1.5 MPI_FILE_GET_BYTE_OFFSET 2、阻塞方式的视口读写 2.1 MPI_FILE_READ 2.2 MPI_FILE_WRITE 2.3 MPI_FILE_READ_…...

性能测试-jmeter脚本录制(十五)

一、jmeter脚本录制&#xff08;不推荐&#xff09;简介&#xff1a; 二、jmeter脚本录制步骤 1、添加代理服务器和线程组 2、配置http代理服务器的端口和目标线程组 3修改本机浏览器代理 4、点击启动 5、每次操作页面前&#xff0c;修改提示文字...

关系型数据库 - MySQL I

MySQL 数据库 MySQL 是一种关系型数据库。开源免费&#xff0c;并且方便扩展。在 Java 开发中常用于保存和管理数据。默认端口号 3306。 MySQL 数据库主要分为 Server 和存储引擎两部分&#xff0c;现在最常用的存储引擎是 InnoDB。 指令执行过程 MySQL 数据库接收到用户指令…...

解锁AI写作新境界:5款工具让你的论文创作事半功倍

在这个数字化飞速发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;已经不再是科幻小说中的幻想&#xff0c;而是实实在在地融入了我们的日常生活。特别是在学术领域&#xff0c;AI技术的介入正在改变传统的论文写作方式。你是否还在为撰写论文而熬夜苦战&#xff1f;…...

一文读懂多组学联合分析产品在医学领域的应用

疾病的发生和发展通常涉及多个层面的生物学过程&#xff0c;包括基因表达、蛋白质功能、代谢物变化等。传统的单一组学研究只能提供某一层面的信息&#xff0c;而多组学关联分析能够综合多个层面的数据&#xff0c;提供更全面、更深入的疾病理解。例如&#xff0c;通过分析患者…...

js react 笔记 2

起因&#xff0c; 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块 const { randomUUID } require(crypto);const uuid randomUUID(); console.log(uuid); // 输出类似 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d 2. 使用 props, 传递参数…...

快速使用react 全局状态管理工具--redux

redux Redux 是 JavaScript 应用中管理应用状态的工具&#xff0c;特别适用于复杂的、需要共享状态的中大型应用。Redux 的核心思想是将应用的所有状态存储在一个单一的、不可变的状态树&#xff08;state tree&#xff09;中&#xff0c;状态只能通过触发特定的 action 来更新…...

活动系统开发之采用设计模式与非设计模式的区别-非设计模式

1、父类Base.php <?php /*** 初始化控制器* User: Administrator* Date: 2022/9/26* Time: 18:00*/ declare (strict_types 1); namespace app\controller; use app\model\common\Token; use app\BaseController; use app\BaseError; use OpenSSL\Encrypt; use app\model…...

JVM面试(六)垃圾收集器

目录 概述STW收集器的并发和并行 Serial收集器ParNew收集器Parallel Scavenge收集器Serial Old收集器Parallel Old收集器CMS收集器Garbage First&#xff08;G1&#xff09;收集器 概述 上一章我们分析了垃圾收集算法&#xff0c;那这一章我们来认识一下这些垃圾收集器是如何运…...

固态硬盘装系统有必要分区吗?

前言 现在的新电脑有哪一台是不使用固态硬盘的呢&#xff1f;这个好像很少很少了…… 有个朋友买了一台新的笔记本电脑&#xff0c;开机之后&#xff0c;电脑只有一个分区&#xff08;系统C盘500GB&#xff09;。这时候她想要给笔记本分区…… 这个真的有必要分区吗&#xf…...

网络安全架构师

网络安全架构师负责构建全面的安全框架&#xff0c;以保护组织的数字资产免受侵害&#xff0c;确保组织在数字化转型的同时维持强大的安全防护。 摩根大通的网络安全运营副总裁兼安全架构总监Lester Nichols强调&#xff0c;成为网络安全架构师对现代企业至关重要&#xff0c;…...

如何本地部署Ganache并使用内网穿透配置公网地址远程连接测试网络

目录 前言 1. 安装Ganache 2. 安装cpolar 3. 创建公网地址 4. 公网访问连接 5. 固定公网地址 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊如何本地部署Ganache并使用内网穿透配置公网地址远程连接测试网络&#xff0c;欢迎大家点赞 &a…...

算法岗/开发岗 实况

深信服算法岗一面 第一题 树的直径有哪些解法 两次dfs和树形dp&#xff0c;讲了一下树形dp的思路 因为我的简历写的比较少&#xff0c;所以面试官问我一些个人信息和擅长哪方面。 我说&#xff1a;ACM大一下打到大三&#xff0c;然后去考研。dp写的多一点&#xff0c;还有思维…...

Nginx跨域运行案例:云台控制http请求,通过 http server 代理转发功能,实现跨域运行。(基于大华摄像头WEB无插件开发包)

文章目录 引言I 跨域运行案例开发资源测试/生产环境,Nginx代理转发,实现跨域运行本机开发运行II nginx的location指令Nginx配置中, 获取自定义请求header头Nginx 配置中,获取URL参数引言 背景:全景监控 需求:感知站点由于云台相关操作为 http 请求,http 请求受浏览器…...

【数据分析预备】Pandas

Pandas 构建在NumPy之上&#xff0c;继承了NumPy高性能的数组计算功能&#xff0c;同时提供更多复杂精细的数据处理功能 安装 pip install pandas导入 import pandas as pdSeries 键值对列表 # 创建Series s1 pd.Series([5, 17, 3, 26, 31]) s10 5 1 17 2 3 3 26 4 31 dt…...

MATLAB-基于高斯过程回归GPR的数据回归预测

目录 目录 1 介绍 1. 1 高斯过程的基本概念 1.2 核函数&#xff08;协方差函数&#xff09; 1.3 GPR 的优点 1.4. GPR 的局限 2 运行结果 3 核心代码 1 介绍 高斯过程回归&#xff08;Gaussian Process Regression, GPR&#xff09;是一种强大的非参数贝叶斯方法&…...

欧洲国际眼科盛会,中国眼科专家周进斩获六项屈光大奖

2024年第42届欧洲白内障和屈光外科医生协会(ESCRS)大会由世界青光眼协会(WGA)、欧洲白内障和屈光外科医生协会(ESCRS)主办&#xff0c;于2024年9月6日至10日在西班牙巴塞罗那举行。 这场眼科盛会&#xff0c;汇聚了来自全球130多个国家的上万名眼科医学领域的顶尖专家、学者和临…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...