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

【React】项目的搭建

  • create-react-app 搭建
  • vite 搭建
  • 相关下载

在Vue中搭建项目的步骤:1.首先安装脚手架的环境,2.通过脚手架的指令创建项目

在React中有两种方式去搭建项目:1.和Vue一样,先安装脚手架然后通过脚手架指令搭建;2.npx create-react-app my-app (项目名称小写的英文字母)

npm和npx的区别:npm搭建的命令环境,( 脚手架版本 )不会再发生变化。npx创建的项目永远是最新的( 脚手架版本 ),它不用下载环境,直接创建项目

create-react-app 搭建

脚手架搭建:

npx create-react-app myapp

如果不想安装最新的react版本怎么办需要版本升级或降级:

npm i react-dom@18.3.1 --legacy-peer-deps
npm i react@18.3.1 --legacy-peer-deps执行以上命令会自动更新package.json中react-dom和react的版本号以及node_modules中的依赖包,无需手动修改删除

项目目录:

publicindex.html:单页面应用的入口,唯一的htmlmanifest.json:移动端app配置文件(等同于uniApp中的manifest.json)robots.txt:爬虫协议,给搜索引擎看的,这个协议没有强制性,它是用于pc端的(小程序中的爬虫协议是sitemap.json)
srcApp.css:根组件的css文件App.js:根组件的js文件App.test.js:根组件的测试文件(可以不要)index.css:全局css文件index.js:主入口js文件(类似于vue的main.js)reportWebVitals.js:配置测试用的(可以不要)setupTests.js:在它里面配置引入了测试文件/模块(可以不要).gitignore:git文件,哪些文件不需要上传package.json:项目对npm各种包的依赖,但是它锁定的是大版本,也就是版本号第一位如:"react": "^18.3.1",锁定的是18如果有向上的标号"^",是根据情况下载最新的包,所以实际上可能项目中的包版本是"react": "^18.3.3"package-lock.json:锁定安装时的包的版本号,需要上传到git,保证大家的依赖包一致

在这里插入图片描述

vite 搭建

npm create vite@latest

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

npm create vite@latest myapp -- --template react npm create vite@latest myapp -- --template react-ts  

在这里插入图片描述

相关下载

AntD:npm install antd --save

官网:https://ant.design/docs/spec/introduce-cn  (蚂蚁金服的UI框架Ant Design)Ant Design它提供组件库:React基于移动端的组件库:Ant Design Mobile  <!-- https://mobile.ant.design/zh/ -->Vue各个版本: Ant Design of Vue  <!-- https://antdv.com/docs/vue/introduce -->Angular:Ant Design of Angular  <!-- https://ng.ant.design/docs/introduce/zh -->(1) 使用的时候,在组件内引入,按需加载import {Button} from 'antd';<Button type="primary">Primary Button</Button>(2) 引入主文件,src > App.css中引入(重置默认样式表,或者其它的如:Normalize.css)@import '~antd/dist/reset.css';

路由:npm i react-router-dom

ReactRouter包含三个内容:(1) react-router:核心库
(2) react-router-dom:正常PC用的
(3) react-router-native:移动native用的

Sass:npm i sass

如何在React中使用Less | Sasssass(1) npm i sass(2) src > App.scss(sass文件的后缀有两种:.scss 或 .sass,前者更符合我们的代码编写习惯)less(1) npm i less less-loader(less-loader可以把less转成css)(2) 改react的配置项目create-react-app的配置文件被作者隐藏起来了,需要暴露配置文件首先需要将项目提交到本地仓:git add .git commit -m 'init'(3) npm run eject (暴露配置,弹出配置操作是不可逆的)(4) config文件夹下 => webpack.config.js文件 (具体修改内容查看文件中,修改了配置文件后重启一下项目)快捷键:ctrl + f,查找输入:scss,修改后即可在React中使用Less

清理项目,将多余的文件不要的内容删除

相关文章:

【React】项目的搭建

create-react-app 搭建vite 搭建相关下载 在Vue中搭建项目的步骤&#xff1a;1.首先安装脚手架的环境&#xff0c;2.通过脚手架的指令创建项目 在React中有两种方式去搭建项目&#xff1a;1.和Vue一样&#xff0c;先安装脚手架然后通过脚手架指令搭建&#xff1b;2.npx create-…...

方案精读:华为数字化转型实践案例合集【附全文阅读】

华为数字化转型旨在通过数字化变革实现全连接的智能华为,成为行业标杆,提升客户满意度和运营效率。其以客户为中心,基于 “双轮驱动” 理念,从转意识、方法、文化、组织、模式等方面入手,构建数字化平台,推进数据治理,保障安全,开展业务重构。通过合同 360、产品设计与…...

VScode使用Pyside6(环境篇)

Pyside6的环境搭建&#xff1a; cmd命令窗口输入&#xff1a;pip install pyside6 使用everthing进行查找&#xff1a;&#xff08;非常好用的一款搜索工具 &#xff09; 进入PySide6文件夹中&#xff0c;点击designer.exe,查看是否能够点开。 VScode环境搭建&#xff1a; 下…...

智能云图库-12-DDD重构

本节重点​ 之前我们已经完成了本项目的功能开发。由于本项目功能丰富、代码量大&#xff0c;如果是在企业中维护开发的项目&#xff0c;传统的 MVC 架构可能会让后续的开发协作越来越困难。所以本节鱼皮要从 0 带大家学习一种新的架构设计模式 —— DDD 领域驱动设计。 大纲…...

Linux 网络配置

文章目录 网络基础知识IP地址子网掩码DNS Linux操作系统网络配置 网络基础知识 IP地址 IP地址是用于区分同一个网络中的不同主机的唯一标识。 Internet中的主机要与其他机器通信必须具有一个IP地址&#xff0c;因为网络中传输的数据包必须携带目的IP地址和源IP地址&#xff…...

05-DevOps-Jenkins自动拉取构建代码2

通过前面的操作&#xff0c;已经成功完成了源代码的打包工作&#xff0c;具体操作参见下面的文章&#xff1a; 05-DevOps-Jenkins自动拉取构建代码-CSDN博客 验证打包文件 验证打包后的文件是否存在&#xff0c;进入到Jenkins的工作目录中&#xff0c;找到对应的jar包&#x…...

ESP32之OTA固件升级流程,基于VSCode环境下的ESP-IDF开发,基于阿里云物联网平台MQTT-TLS连接通信(附源码)

目录 1.创建产品和设备 2.准备工作 2.1 获取基础工程 2.2 基本知识概述 2.2.1 OTA升级流程 2.2.2 主题和数据格式 &#xff08;1&#xff09;设备上报版本号 ①请求主题&#xff08;设备 -> 阿里云&#xff09;&#xff1a; ②响应主题&#xff08;阿里云->设备…...

【秣厉科技】LabVIEW工具包——OpenCV 教程(20):拾遗 - imgproc 基础操作(下)

文章目录 前言imgproc 基础操作&#xff08;下&#xff09;8. 霍夫检测9. 滤波与模糊10. 拟合与包围 总结 前言 需要下载安装OpenCV工具包的朋友&#xff0c;请前往 此处 &#xff1b;系统要求&#xff1a;Windows系统&#xff0c;LabVIEW>2018&#xff0c;兼容32位和64位。…...

kafka发送消息,同时支持消息压缩和不压缩

1、生产者配置 nacos中增加配置&#xff0c;和公共spring-kafka配置字段有区分 需要发送压缩消息时&#xff0c;使用该配置类发送即可 import org.apache.kafka.clients.producer.ProducerConfig; import org.springframework.beans.factory.annotation.Autowired; import or…...

AOSP世界时间的更新

在 AOSP&#xff08;Android Open Source Project&#xff09;中&#xff0c;世界时间的更新主要涉及设备时区数据的管理和更新&#xff0c;以确保设备能够正确显示全球各地的时间。AOSP 依赖 IANA 时区数据库&#xff08;也称为 tzdata&#xff09;来提供时区规则和世界时间数…...

Python + 链上数据可视化:让区块链数据“看得懂、用得上”

Python + 链上数据可视化:让区块链数据“看得懂、用得上” 区块链技术的透明性和去中心化特性,使得链上数据成为金融、供应链、NFT 以及 DeFi 领域的关键参考。可是,对于普通用户而言,链上数据往往晦涩难懂,难以直接利用。那么,如何利用 Python 提取、分析并直观展示链上…...

方德桌面操作系统V5.0-G23 vim无法复制粘贴内容

1.修改 Vim 配置文件 rootyuhua-virtualmachine:/etc/docker# sudo vim /usr/share/vim/vim82/defaults.vim 2.在第82行找到set mousea行&#xff0c;将其为set mouse-a。如果文件中没有set mousea&#xff0c;则修改添加set mouse-a。 3.保存文件并退出 Vim&#xff1a; 4…...

[linux] vim 乱码

1. 确保终端支持中文 设置终端编码为 UTF-8,运行: echo $LANG如果不是 UTF-8(如 en_US.UTF-8),你可以设置为: export LANG=zh_CN.UTF-8 export LC_ALL=zh_CN.UTF-8 2. 确保 Vim 使用 UTF-8 编码 打开 .vimrc 或输入以下命令: :set encoding=utf-8 :set fileencodin…...

天洑参加人工智能校企产学研及人才对接活动——走进南京大学人工智能学院

4月15日&#xff0c;人工智能校企产学研及人才对接——走进南京大学人工智能学院活动在南京大学成功举办。此次活动由江苏省人工智能学会、南京大学人工智能学院主办&#xff0c;江苏省工业和信息化厅党组成员、副厅长池宇&#xff0c;南京大学副校长周志华出席。江苏省工业和信…...

33、单元测试实战练习题

以下是三个练习题的具体实现方案&#xff0c;包含完整代码示例和详细说明&#xff1a; 练习题1&#xff1a;TDD实现博客评论功能 步骤1&#xff1a;编写失败测试 # tests/test_blog.py import unittest from blog import BlogPost, Comment, InvalidCommentErrorclass TestBl…...

《AI大模型应知应会100篇》第22篇:系统提示词(System Prompt)设计与优化

第22篇&#xff1a;系统提示词(System Prompt)设计与优化 摘要 在大语言模型&#xff08;LLM&#xff09;应用中&#xff0c;系统提示词&#xff08;System Prompt&#xff09;是控制模型行为的核心工具之一。它不仅定义了模型的身份、角色和行为规范&#xff0c;还直接影响输…...

【KWDB 创作者计划】_深度学习篇---松科AI加速棒

文章目录 前言一、简介二、安装与配置硬件连接驱动安装软件环境配置三、使用步骤初始化设备调用SDK接口检测设备状态:集成到AI项目四、注意事项兼容性散热固件更新安全移除五、硬件架构与技术规格核心芯片专用AI处理器内存配置接口类型物理接口虚拟接口能效比散热设计六、软件…...

【Quest开发】在虚拟世界设置具有遮挡关系的透视窗口

软件&#xff1a;Unity 2022.3.51f1c1、vscode、Meta XR All in One SDK V72 硬件&#xff1a;Meta Quest3 仅针对urp管线 参考了YY老师这篇&#xff0c;可以先看他的再看这个可能更好理解一些&#xff1a;Unity Meta Quest MR 开发&#xff08;七&#xff09;&#xff1a;使…...

Spark on K8s 在vivo大数据平台的混部实战

作者&#xff1a;vivo 互联网大数据团队- Qin Yehai 在离线混部可以提高整体的资源利用率&#xff0c;不过离线Spark任务部署到混部容器集群需要做一定的改造&#xff0c;本文将从在离线混部中的离线任务的角度&#xff0c;讲述离线任务是如何进行容器化、平台上的离线任务如何…...

Mac配置Java的环境变量

刚拿到手的Mac mini M4如何去设置java的环境变量&#xff1f; 第一步&#xff1a; 首先&#xff0c;你先下载好intelliJ IDEA&#xff0c;然后在里面自带的jdk列表里选择你自己想要使用的jdk的版本以及供应商。 下面是我自己使用的jdk版本以及供应商&#xff1a; 第二步&am…...

RPCRT4!OSF_CCONNECTION::OSF_CCONNECTION函数分析之创建一个RPCRT4!OSF_CCALL--RPC源代码分析

RPCRT4!OSF_CCONNECTION::OSF_CCONNECTION函数分析之创建一个RPCRT4!OSF_CCALL 第一部分&#xff1a; 1: kd> p RPCRT4!OSF_CCONNECTION::OSF_CCONNECTION0x167: 001b:77bf6957 393dec35c877 cmp dword ptr [RPCRT4!gfRPCVerifierEnabled (77c835ec)],edi 1: kd> …...

6、事件处理法典:魔杖交互艺术——React 19 交互实现

一、魔杖启灵&#xff1a;交互魔法的本质 "记住&#xff0c;巫师们&#xff01;魔杖的每一次挥动都是与魔法世界的对话&#xff0c;"麦格教授的魔杖在空中划出金色事件流&#xff0c;"React 19的useTransition如同时间转换器&#xff0c;让麻瓜设备也能感知魔杖…...

.net C# 使用Epplus库将Datatable导出到Excel合并首列

最近处理大量数据,需单独导出到首列名称一致的excel,Epplus免费,效率spire高,在Nuget添加Epplus。因为特殊原因,不能使用数据库,只能由数据源导出到excel;最终处理39万行输出到单独的excel文件时间2分钟。 一、EPPlus 基础介绍 ​EPPlus​ 是一个开源的 .NET 库(适用…...

【gpt生成-总览】怎样才算开发了一门编程语言,需要通过什么测试

开发一门真正的编程语言需要经历完整的设计、实现和验证过程&#xff0c;并通过系统的测试体系验证其完备性。以下是分阶段开发标准及测试方法&#xff1a; 一、语言开发核心阶段 1. 语言规范设计&#xff08;ISO/IEC 标准级别&#xff09; ​​语法规范​​&#xff1a;BNF/…...

网络417 路由转发2 防火墙

路由器临时开启路由转发功能 查看节点a网关ip 节点b网关 1.开启路由器路由转发功能。 2.配置到节点a 节点b的网络。 节点a因为和节点b不在同一网段&#xff0c;计划通过网关直达 网关就是中间节点路由器的ip地址 再Ping另一个 计划节点bping节点c ping不通 是因为 修改了…...

HttpSessionAttributeListener 的用法笔记250417

HttpSessionAttributeListener 的用法笔记250417 以下是关于 HttpSessionAttributeListener 的用法详解&#xff0c;涵盖核心方法、应用场景、实现步骤及关键注意事项&#xff0c;帮助您有效监听会话&#xff08;HttpSession&#xff09;中属性的动态变化&#xff1a; 1. 核心功…...

Spring Boot 实现 Excel 导出功能(支持前端下载 + 文件流)

&#x1f9e0; 一、为什么用 EasyExcel&#xff1f; 在 Java 开发中&#xff0c;操作 Excel 的框架主要有&#xff1a; Apache POI&#xff08;经典但慢、内存占用大&#xff09; JXL&#xff08;老旧不维护&#xff09; Alibaba EasyExcel&#xff08;阿里出品&#xff0c;…...

Java动态批量生成logback日志文件

应用场景举个例子&#xff1a; 当我一个服务需要启动n个端口&#xff0c;来监听n个来源的数据&#xff0c;并且处理数据逻辑一致&#xff1b;但是我想要它们的日志分开文件夹来打印&#xff0c;从而更好的分析问题&#xff0c;那么就可以用我下面提供的模版了&#xff1b; 动态…...

从原理到实践:NFS复杂故障处理方法论

#作者&#xff1a;孙德新 文章目录 一、nfs使用概述二、疑难故障现象描述三、原理分析四、解决方案五、优化服务器资源配置&#xff1a;六、故障案例总结七、故障预防建议八、nfs优化方法 一、nfs使用概述 NFS&#xff08;Network File System&#xff09;是一种分布式文件系…...

SAP FI固定资产报错:在折旧范围 30 中的业务与帐面净值规则冲突 - 解决方法

一、问题描述 消息号 AA660 诊断 由于和在区域30中检查的净帐面价值规则相反&#xff0c;不能过帐该凭证。 过程 当输入比例值时会出现此错误。比例值超过过帐金额&#xff0c;如 100 的后续资本化&#xff0c;但该金额的比例折旧为 110。请检查输入项并做需要的更正。 二、…...

Go语言从零构建SQL数据库(8):执行计划的奥秘

从SQL语句到高效查询&#xff1a;执行计划的奥秘 想象你是一位旅行者&#xff0c;想从北京到上海。你告诉导航软件你的目的地&#xff08;类似SQL查询&#xff09;&#xff0c;但导航软件需要为你规划具体路线——是走高速公路还是国道&#xff1f;是选择最短距离还是最省时间…...

UNet 改进(12):UNet with ECA (Efficient Channel Attention) 网络

详解 下面将详细解析这个实现了ECA注意力机制的UNet网络代码。 1. 代码概述 代码实现了一个带有Efficient Channel Attention (ECA)模块的UNet网络架构。 UNet是一种常用于图像分割任务的编码器-解码器结构网络,而ECA模块则是一种轻量级的通道注意力机制,可以增强网络对重…...

关于 AI驱动的智慧家居、智慧城市、智慧交通、智慧医疗和智慧生活 的详细解析,涵盖其定义、核心技术、应用场景、典型案例及未来趋势

以下是关于 AI驱动的智慧家居、智慧城市、智慧交通、智慧医疗和智慧生活 的详细解析&#xff0c;涵盖其定义、核心技术、应用场景、典型案例及未来趋势&#xff1a; 一、AI智慧家居 1. 定义与核心功能 定义&#xff1a;通过AI与物联网&#xff08;IoT&#xff09;技术&#…...

Windows11-24h2的任务栏时间显示秒 笔记250417

Windows11-24h2的任务栏时间显示秒 笔记250417 打开注册表编辑器 WinR输入 regedit 回车。 修改注册表项 定位到路径&#xff1a; HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced右键右侧空白处 → 新建【DWORD (32位)值】→ 命名为 ShowSec…...

机器学习的简单应用

什么是机器学习&#xff1f; 定义&#xff1a; ‌机器学习&#xff08;Machine Learning, ML&#xff09;‌ 是人工智能&#xff08;AI&#xff09;的一个子领域&#xff0c;其核心是 ‌通过算法让计算机从数据中自动学习规律&#xff0c;并基于这些规律对新数据做出预测或决策…...

双 Token 与 单 Token 优缺点

双Token与单Token认证机制对比 在Web应用开发中&#xff0c;身份认证和授权是保障系统安全的核心环节。随着技术演进&#xff0c;基于Token的认证机制逐渐取代传统Session方案&#xff0c;而双Token与单Token架构的选型争议也日益成为开发者关注的焦点。本文将从技术原理、优缺…...

第五章 SQLite数据库:6、SQLite 常用语法1

SQLite Insert 语句 SQLite 的 INSERT INTO 语句用于向数据库的某个表中添加新的数据行。 语法 INSERT INTO 语句有两种基本语法&#xff0c;如下所示&#xff1a; INSERT INTO TABLE_NAME [(column1, column2, column3,...columnN)] VALUES (value1, value2, value3,...…...

JVM考古现场(二十二):降维打击·用二向箔优化内存模型

"警报&#xff01;三维堆内存正在经历二维化坍缩&#xff01;" 我腰间的玄铁令突然震动&#xff0c;在蜀山剑派的量子剑阵中投射出诡异的曼德博分形——这是三体文明发动降维打击的铁证&#xff01; 楔子&#xff1a;二向箔奇点降临 昆仑镜监控日志&#xff1a; // …...

eclipse常用快捷键

Eclipse 是一款功能强大的 Java 集成开发环境&#xff08;IDE&#xff09;&#xff0c;熟练掌握其快捷键可以显著提高开发效率。下面是一些常用的 Eclipse 快捷键分类介绍&#xff1a; 编辑相关快捷键 操作快捷键说明内容辅助Alt /调出代码提示和自动补全功能&#xff0c;根…...

TAS(Thin-Agent服务)的先决条件与安装指南

TAS&#xff08;Thin-Agent服务&#xff09;的先决条件与安装指南 2.1 支持的操作系统 TAS支持以下操作系统环境&#xff1a; Windows 服务器 • Windows Server 2008 R2 SP1 • Windows Server 2012 R2 • Windows Server 2016 Linux 发行版 • Red Hat Enterprise Linux (RHE…...

无线uniapp调试设备

创作灵感来自某篇博客 uniapp安卓手机无线真机调试教程_uniapp无线真机调试-CSDN博客...

TAS启动与卸载

3. 启动TAS&#xff08;Thin-Agent服务&#xff09; TAS在安装完成后通常会自动启动&#xff0c;并在系统重启时自启。如需手动启动&#xff0c;请按以下步骤操作&#xff1a; &#xfffc; 3.1 在Windows上启动TAS 1. 打开 Windows服务管理器&#xff1a; ◦ 按下 Win R&…...

Oracle测试题目及笔记(多选)

所有题目来自于互联网搜索 在以下概要文件的陈述中&#xff0c;哪两个是正确的&#xff1f; &#xff08;D 和 E&#xff09; A&#xff0e; 概要文件不能被用来为账户加锁 B&#xff0e; 概要文件不能被用来控制资源使用 C&#xff0e; 数据库管理员可以使用概要文件更改用户密…...

定制化突围:遨游防爆手机的差异化竞争策略

在石油、化工、矿山等危险作业场景中&#xff0c;随着工业智能化与安全生产需求的升级&#xff0c;行业竞争逐渐从单一产品性能的比拼转向场景化解决方案的深度较量。遨游通讯以九重防爆标准为技术底座&#xff0c;融合多模稳控系统与全景前瞻架构&#xff0c;开辟出"千行…...

c#清理释放内存

虽然c#具有内存管理和垃圾回收机制&#xff0c;但是在arcobjects二次开发嵌入到arcgis data reviewet还会报内存错误。需要强制清理某变量内存方法如下: 1设置静态函数ReleaseCom函数 public static void ReleaseCom(object o) { try{System.Runtime.InteropServices.Marsh…...

从入门到精通【MySQL】 JDBC

文章目录 &#x1f4d5;1. 什么是JDBC&#x1f4d5;2. JDBC的使用原理&#x1f4d5;3. 使用JDBC具体步骤✏️3.1 标题获取MySQL驱动包并修改pom.xml文件✏️3.2 建立数据库连接✏️3.3 创建Statement✏️3.4 执行SQL语句✏️3.5 处理返回结果✏️3.6 释放资源和关闭连接 &#…...

Sigfox技术|独特的运营模式 + 超窄带技术 + 非授权频谱

在物联网&#xff08;IoT&#xff09;通信技术的快速发展中&#xff0c;低功耗广域网&#xff08;LPWAN&#xff09;成为了推动智能设备连接的重要基础技术之一。作为LPWAN中的一种专有通信协议&#xff0c;Sigfox以其低功耗和广覆盖的特点脱颖而出&#xff0c;在物联网应用中占…...

【Dify 前端源码解读系列】MDX 让 API 文档焕发生机

什么是 MDX? MDX 是一种强大的文档格式,它允许在 Markdown 内容中使用 JSX。这意味着你可以在 Markdown 的简洁语法中嵌入交互式组件,使文档不再局限于静态内容。MDX 完美地将 Markdown 的简单与 JSX 的灵活性结合在一起,特别适合需要丰富交互体验的文档场景。 MDX 的优势…...

docker能用来干什么的

最近项目像简快部署docker&#xff0c;但是发现源被隔离&#xff0c;暂时先记下&#xff0c;以后有机会再研究。 下面摘抄的网文网址如下&#xff1a;Docker能用来干什么的 ?_超级码客_海量程序员面试题库 | 笔试题库 | 面试求职考试神器 docker能用来干什么的 docker能用来做…...

dispaly: inline-flex 和 display: flex 的区别

display: inline-flex 和 display: flex 都是 CSS 中用于创建弹性盒子布局&#xff08;Flexbox&#xff09;的属性值&#xff0c;但它们之间有一些关键的区别&#xff0c;主要体现在元素如何在页面上被渲染和它们对周围元素的影响。 主要区别 1&#xff0c;块级 vs 行内块级 d…...