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

使用vite创建一个react18项目

一、vite是什么?

vite 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

  • 一个开发服务器,它基于原生 ES 模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。

  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

在这里插入图片描述

二、使用vite创建一个react18项目

  1. 执行指令。

    // npm
    npm create vite@latest
    

    使用 yarn 包管理器则执行以下指令:

    // yarn
    yarn create vite
    

    使用 pnpm 包管理器则执行以下指令:

    // pnpm
    pnpm create vite
    
  2. 输入项目名称。
    在这里插入图片描述

  3. 选择React项目模板,空格按钮确认。
    在这里插入图片描述

  4. 选择变种语言 TypeScript。
    在这里插入图片描述

  5. 进入项目目录,执行 npm install 安装 node_modules,完成后,输入指令 npm run dev 启动程序。
    在这里插入图片描述在这里插入图片描述

  6. 项目目录。
    在这里插入图片描述

三、使用react18技术栈(全家桶)中后台管理项目模板

  • coreui-free-react-admin-template(vite): https://github.com/coreui/coreui-free-react-admin-template
  • coreui-free-react-admin-template(create-react-app): https://github.com/coreui/coreui-free-react-admin-template

相关文章:

使用vite创建一个react18项目

一、vite是什么? vite 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成: 一个开发服务器,它基于原生 ES 模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。 …...

子集(迭代)(leetcode 78)

核心逻辑&#xff1a; 根据子数组包含的元素个数迭代&#xff1a; 现有子集的基础上通过添加这个新元素来翻倍子集的数量 f(n)2f(n−1) vector<vector<int>> subsets(vector<int>& nums) {vector<vector<int>> ans;int i,j,k;ans.p…...

汽车疲劳测试试验平台技术要求(北重厂家)

汽车疲劳测试试验平台技术要求通常包括以下几个方面&#xff1a; 车辆加载能力&#xff1a;测试平台需要具备足够的承载能力&#xff0c;能够同时测试多种车型和不同重量的车辆。 动力系统&#xff1a;测试平台需要具备稳定可靠的动力系统&#xff0c;能够提供足够的力和速度来…...

Redis -- 缓存雪崩问题

缓存雪崩是指在同一时段大量的缓存key同时失效或者Redis服务宕机&#xff0c;导致大量请求到达数据库&#xff0c;带来巨大压力。 可能原因 : 同一时间大量的key到期 ; 解决方案&#xff1a; 给不同的Key的TTL添加随机值 利用Redis集群提高服务的可用性 给缓存业务添加降…...

【ARM 嵌入式 C 文件操作系列 20 -- 文件删除函数 remove 详细介绍】

请阅读【嵌入式开发学习必备专栏 】 文章目录 文件删除函数 remove 文件删除函数 remove 在 C 语言中&#xff0c; 可以使用 remove 函数来删除一个文件&#xff0c;但在删除之前 可能想确认该文件是否存在。 可以使用 stat 函数来检查文件是否存在。 以下是如何实现这个功能…...

LeetCode刷题之31.下一个排列

文章目录 1. 题目2.分析3.解答3.1 先排序&#xff0c;后交换3.2 先交换&#xff0c;后排序 1. 题目 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3…...

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(九)- 向量定点算术指令

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容&#xff1a; 这是一份关于向量扩展的详细技术文档&#xff0c;内容覆盖了向量指令集的多个关键方面&#xff0c;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…...

【Java网络编程】IP网络协议与TCP、UDP网络传输层协议

1.1、IP协议 当应用层的数据被封装后&#xff0c;想要将数据在网络上传输&#xff0c;数据究竟要被发往何处&#xff0c;又该如何精准的在网络上定位目标机器&#xff0c;此时起到关键作用的就是“IP协议”。IP协议的作用在于把各种数据包准确无误的传递给目标方&#xff0c;其…...

C# 分布式自增ID算法snowflake(雪花算法)

文章目录 1. 概述2. 结构3. 代码3.1 IdWorker.cs3.2 IdWorkerTest.cs (测试) 1. 概述 分布式系统中&#xff0c;有一些需要使用全局唯一ID的场景&#xff0c;这种时候为了防止ID冲突可以使用36位的UUID&#xff0c;但是UUID有一些缺点&#xff0c;首先他相对比较长&#xff0c…...

commonJS和esModule的应用

commonJS commonJS规范的核心变量是&#xff1a;exports&#xff0c;module.exports&#xff0c;require exports 和 module.exports可以负责模块的导出require 负责模块的导入 module.exports 导出方案&#xff1a; const name yx const age 18// 1 导出方案 module.exp…...

(十一)RabbitMQ及SpringAMQP

1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;…...

STM32 M3内核寄存器概念

内容主要来自<<M3内核权威指南>> 汇编程序中的最低有效位&#xff08;Least Significant Bit&#xff09;。LSB是二进制数中最右边的位&#xff0c;它代表了数值中的最小单位。在汇编程序中&#xff0c;LSB通常用于表示数据的最小精度或者作为标志位。 ---------…...

SQL语句的编写

##创建用户-建表建库 #创建一个用户名为 feng&#xff0c;允许从任何主机 % 连接&#xff0c;并使用密码 sc123456 进行身份验证的用户。 rootTENNIS 16:33 scmysql>create user feng% identified by sc123456; Query OK, 0 rows affected (0.04 sec) #创建一个名为fen…...

Lecture 1~3 About Filter

文章目录 空间域上的滤波器- 线性滤波器盒状滤波器Box Filter锐化Sharpening相关运算 vs. 卷积运算 Correlation vs. Convolution - 非线性滤波器高斯滤波器Gaussian filter - 实际问题- 纹理texture 频域上的滤波器 滤波的应用- 模板匹配- 图像金字塔 空间域上的滤波器 图像…...

配置vscode链接linux

1.安装 remote SSH 2.按F1 ssh ljh服务器公网ip 3. 选择保存远端host到本地 某位置 等待片刻后 4. 切换到远程资源管理器中 应该可以看到一台电脑&#xff0c;右键在当前窗口链接&#xff0c;输入你的服务器用户密码后电脑变绿说明远程连接成功 5.一定要登陆上云服务器后再…...

论文阅读——MVDiffusion

MVDiffusion: Enabling Holistic Multi-view Image Generation with Correspondence-Aware Diffusion 文生图模型 用于根据给定像素到像素对应关系的文本提示生成一致的多视图图像。 MVDiffusion 会在给定任意每个视图文本的情况下合成高分辨率真实感全景图像&#xff0c;或将…...

Linux中的网络命令深度解析与CentOS实践

Linux中的网络命令深度解析与CentOS实践 在Linux系统中,网络命令是管理和诊断网络问题的关键工具。无论是网络管理员还是系统开发者,熟练掌握这些命令都是必不可少的。本文将深入探讨Linux中常用的网络命令,并以CentOS为例,展示这些命令的具体应用。 一、ping命令 ping命…...

nginx配置实例(反向代理)

目录 一、目标-反向代理实现效果 二、安装tomcat 三、配置nginx服务 四、配置反向代理 一、目标-反向代理实现效果 访问过程分析&#xff1a; 二、安装tomcat 1、安装jdk环境 新建/export/server目录 解压jdk 查看是否解压成功 配置jdk软连接 进入jdk的bin目录中&#x…...

Flutter 解决NestedScrollView与TabBar双列表滚动位置同步问题

文章目录 前言一、需要实现的效果如下二、flutter实现代码如下&#xff1a;总结 前言 最近写flutter项目&#xff0c;遇到NestedScrollView与TabBar双列表滚动位置同步问题&#xff0c;下面是解决方案&#xff0c;希望帮助到大家。 一、需要实现的效果如下 1、UI图&#xff1…...

云计算存在的安全隐患

目录 一、概述 二、ENISA云安全漏洞分析 三、云计算相关系统漏洞 3.1 概述 3.2 漏洞分析 3.2.1 Hypervisor漏洞 3.2.1.1 CVE-2018-16882 3.2.1.2 CVE-2017-17563 3.2.1.3 CVE-2010-1225 3.2.2 虚拟机漏洞 3.2.2.1 CVE-2019-14835 3.2.2.2 CVE-2019-5514 3.2.2.3 CV…...

从检测到分析:手机位置热力图生成与行为模式挖掘扩展方案

从检测到分析&#xff1a;手机位置热力图生成与行为模式挖掘扩展方案 1. 引言&#xff1a;从“看见”到“看懂” 想象一下&#xff0c;你在一间大型会议室里&#xff0c;墙上挂着十几个监控摄像头。传统的监控系统能告诉你“画面里有手机”&#xff0c;但仅此而已。你无法知道…...

别再死记硬背了!用Python+OpenCV动手复现计算机视觉核心算法(边缘检测/图像分割实战)

用PythonOpenCV实战复现计算机视觉核心算法&#xff1a;从理论到代码的跨越 计算机视觉作为人工智能领域最炙手可热的方向之一&#xff0c;其核心算法构成了这门学科的骨架。但很多学习者在掌握理论知识后&#xff0c;面对实际项目仍感到无从下手——公式记住了&#xff0c;原理…...

重构音乐体验:六音插件的技术突围

重构音乐体验&#xff1a;六音插件的技术突围 【免费下载链接】New_lxmusic_source 六音音源修复版 项目地址: https://gitcode.com/gh_mirrors/ne/New_lxmusic_source 问题发现&#xff1a;洛雪音乐的音源服务困境 当洛雪音乐升级至1.6.0版本后&#xff0c;许多用户遭…...

从实验室到生活场景:近红外脑成像(fNIRS)如何重塑认知研究边界

1. 从实验室到客厅&#xff1a;fNIRS如何打破认知研究的围墙 十年前我第一次接触近红外脑成像设备时&#xff0c;它还是个需要固定在三脚架上的"庞然大物"&#xff0c;被试必须像雕塑般保持静止。如今看着学生戴着LUMO设备在操场自由活动时采集数据&#xff0c;这种技…...

React-Grid-Layout终极指南:三步构建专业级可拖拽网格布局

React-Grid-Layout终极指南&#xff1a;三步构建专业级可拖拽网格布局 【免费下载链接】react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React. 项目地址: https://gitcode.com/gh_mirrors/re/react-grid-layout React-Gri…...

BUUCTF-[HITCON 2017]SSRFme

代码分析<?phpif (isset($_SERVER[HTTP_X_FORWARDED_FOR])) { //HTTP_X_FORWARDED_FOR可以获取客户端真正ip地址&#xff0c;和各个代理IP地址$http_x_headers explode(,, $_SERVER[HTTP_X_FORWARDED_FOR]); //拆分字符串&#xff0c;以&#xff0c;分割$_SERVER[REMOTE…...

告别云端:在百元ESP32-S3上实现离线婴儿哭声识别,隐私与实时性我全都要

边缘智能革命&#xff1a;用ESP32-S3打造零隐私风险的婴儿监护终端 当科技与育儿需求碰撞&#xff0c;我们面临一个核心矛盾&#xff1a;如何在不牺牲隐私的前提下实现智能化监护&#xff1f;传统方案依赖云端处理&#xff0c;却让敏感数据暴露在传输与存储环节。本文将揭示一种…...

4象限解析OpenRocket:开源火箭仿真工具的技术突破与实践指南

4象限解析OpenRocket&#xff1a;开源火箭仿真工具的技术突破与实践指南 【免费下载链接】openrocket Model-rocketry aerodynamics and trajectory simulation software 项目地址: https://gitcode.com/GitHub_Trending/op/openrocket 在模型火箭设计领域&#xff0c;物…...

xiaomusic设备DID配置故障排除与优化指南

xiaomusic设备DID配置故障排除与优化指南 【免费下载链接】xiaomusic 使用小爱音箱播放音乐&#xff0c;音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic xiaomusic作为一款开源的小爱音响音乐服务工具&#xff0c;让用户能够通过…...

Wan2.2-I2V-A14B效果对比:LSTM时序预测辅助下的动态剧情生成

Wan2.2-I2V-A14B效果对比&#xff1a;LSTM时序预测辅助下的动态剧情生成 1. 引言 想象一下&#xff0c;当你输入一段文字描述&#xff0c;AI不仅能生成对应的视频&#xff0c;还能像专业导演一样把控剧情节奏和情感起伏。这正是Wan2.2-I2V-A14B结合LSTM时序预测技术带来的突破…...