Vite创建React项目,另外一种更加简单的方法

在上一篇blog中一个一个安装依赖dependencies,有没有一步到位的方法呢,有!

参考《React 18 Design Patterns and Best Practices Design, build, and deploy production-ready web applications with React》4th 第一章倒数第二节Vite as a solution有个脚手架工具create-vite来帮助我们快速构建React by Vite(npm install不行就yarn add):

1.全局安装ta:

npm install -g create-vite

2.创建项目my-react-app,指定模板为ts版的react,更多模板可看npm官网介绍

create-vite my-react-app --template react-ts

3.cd到目录里&安装依赖

cd my-react-app
npm install
npm run dev

4.运行成功后可以访问localhost:5173查看效果

5.想修改默认端口,可以到vite.config.ts中添加server和指定port为3000:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";// https://vitejs.dev/config/
export default defineConfig({plugins: [react()],server: {port: 3000,},
});

无需重启项目,访问localhost:3000即可

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

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

相关文章

wpf Grid布局详解 `Auto` 和 `*` 是两种常见的设置方式 行或列占多个单元格,有点像excel里的合并单元格。使其余的列平均分配剩余的空间

比如只有行的界面 <Window x:Class"GenerateTokenApp.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/exp…

Linux - 实现一个简单的 shell

前言 之前我们对进程的替换&#xff0c;进程地址空间等等的概念进行了说明&#xff0c;本篇博客会基于这些知识点来 实现一个简单的 shell &#xff0c;如有疑问&#xff0c;可以参考下述博客&#xff1a;Linux - 进程程序替换 - C/C 如何实现与各个语言之间的相互调用 - 替换…

Redis 键值类型及其存储结构

Redis 键值类型及其存储结构 键值类型 键的数据类型是字符串&#xff0c;值的类型有&#xff1a;字符串、列表、Hash、集合、有序集合。 键的存储和查找 Redis底层键的存储类似于Java中其他Hash存储结构&#xff1a;数组链表的组合。数组中存储的是Key Hash函数对数组长度取模…

响应式成人高考自考教育机构网站模板源码下载带后台

模板信息&#xff1a; 模板编号&#xff1a;30558 模板编码&#xff1a;UTF8 模板分类&#xff1a;学校、教育、培训、科研 适合行业&#xff1a;教育机构类企业 模板介绍&#xff1a; 本模板自带eyoucms内核&#xff0c;无需再下载eyou系统&#xff0c;原创设计、手工书写DIVC…

解密Elasticsearch:深入探究这款搜索和分析引擎

•开篇 最近使用Elasticsearch实现画像系统&#xff0c;实现的dmp的数据中台能力。同时调研了竞品的架构选型。以及重温了redis原理等。特此做一次es的总结和回顾。网上没看到有人用Elasticsearch来完成画像的。我来做第一次尝试。 背景说完&#xff0c;我们先思考一件事&…

UseGalaxy.cn生信云平台文本文件操作手册

文本文件是生物信息学中应用非常广泛的文本格式&#xff0c;甚至可以说是最重要的文件格式&#xff0c;比如常见的测序下机数据Fastq、参考基因组保存格式Fasta、比对文件SAM&#xff0c;以及突变列表VCF&#xff0c;它们都是文本文件。熟练地进行文本文件的处理&#xff0c;对…

springboot内容协商

1.基于请求头 Accept: application/json Accept: application/xml Accept: application/xxx 自定义数据 发的请求头的数据类型 期望返回的数据类型 2.通过请求参数 例如 /football?formatjson 一般respondbody 默认以json方式进行返回 如何请求同一个接口&#xff0c;可以…

DAIR-V2X-V 3D检测数据集 转为Kitti格式 | 可视化

本文分享在DAIR-V2X-V数据集中&#xff0c;将标签转为Kitti格式&#xff0c;并可视化3D检测效果。 一、将标签转为Kitti格式 DAIR-V2X包括不同类型的数据集&#xff1a; DAIR-V2X-IDAIR-V2X-VDAIR-V2X-CV2X-Seq-SPDV2X-Seq-TFDDAIR-V2X-C-Example: google_drive_linkV2X-Seq-…

ASP.NETCore6开启文件服务允许通过url访问附件(图片)

需求背景 最近在做一个工作台的文件上传下载功能&#xff0c;主要想实现上传图片之后&#xff0c;可以通过url直接访问。由于url直接访问文件不安全&#xff0c;所以需要手动开启文件服务。 配置 文件路径如下&#xff0c;其中Files是存放文件的目录&#xff1a; 那么&…

深度学习入门-基于Python的理论与实现摘要记录

基本是《深度学习入门-基于Python的理论与实现》的复制粘贴&#xff0c;以作为日后的检索和查询使用 感知机 感知机接收多个输入信号&#xff0c;输出一个信号。 感知机原理 感知机接收多个输入信号&#xff0c;输出一个信号。 图2-1是一个接收两个输入信号的感知机的例子。…

【单目测距】单目相机测距(三)

文章目录 一、前言二、测距代码2.1、地面有坡度2.2、python代码2.2.1、旋转矩阵转角度2.2.2、角度转旋转矩阵2.2.3、三维旋转原理 (Rotation 原理)2.2.4、完整代码 2.3、c 代码 一、前言 上篇博客【单目测距】单目相机测距&#xff08;二&#xff09; 有讲到当相机不是理想状态…

Linux CentOS 8(HTTPS的配置与管理)

Linux CentOS 8&#xff08;HTTPS的配置与管理&#xff09; 目录 一、HTTPS 介绍二、SSL 证书的介绍三、实验配置 一、HTTPS 介绍 HTTPS 在 HTTP 的基础下加入 SSL&#xff0c;SSL 是“Secure Sockets Layer”的缩写&#xff0c;中文为“安全套接层”。因此 HTTPS 是以安全为目…

Qt 二维码生成与识别

1.简介 QZXing是一个基于Qt框架的二维码解码库&#xff0c;它是对ZXing&#xff08;Zebra Crossing&#xff09;开源项目的一个Qt封装。ZXing是一个功能强大的开源二维码解码库&#xff0c;支持多种类型的码&#xff0c;包括QR码、DataMatrix码、Aztec码等。 QZXing提供了一个…

【C++】一文简练总结【多态】及其底层原理&具体应用(21)

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一.多态的概念二.多态的实现1&#xff…

SSM项目与Redis整合以及Redis注解式开发以及Redis击穿穿透雪崩

目录 前言 一、SSM项目整合Redis 1.导入pom依赖 2.Spring-redis相关配置 3.Spring上下文配置 二、redis注解式缓存 1.Cacheable 注解 2.CachePut 注解 3.CacheEvict 注解 三、redis击穿、穿透、雪崩 1. 缓存击穿 2. 缓存穿透 3. 缓存雪崩 前言 当将SSM项目与Red…

NSSCTF逆向题解

[SWPUCTF 2021 新生赛]简简单单的逻辑 直接把key打印出来&#xff0c;然后整理一下result&#xff0c;让key和result进行异或 key[242,168,247,147,87,203,51,248,17,69,162,120,196,150,193,154,145,8] data[0xbc,0xfb,0xa4,0xd0,0x03,0x8d,0x48,0xbd,0x4b,0x00,0xf8,0x27,0x…

uniapp中picker 获取时间组件如何把年月日改成年月日默认时分秒为00:00:00

如图所示&#xff0c;uniapp中picker组件的日期格式为&#xff1a; 但后端要 2023-11-08 00:00:00格式 如何从2023-11-08转化为 2023-11-08 00:00:00&#xff1a;&#x1f447; const date new Date(e.detail.value);//"2023-11-17" date.setHours(0, 0, 0); // 2…

docker部署MinIo

部署单个的MinIo 要在Docker中安装Minio&#xff0c;您可以按照以下步骤进行操作&#xff1a; 使用Docker命令拉取Minio镜像&#xff1a; docker pull minio/minio创建一个用于存储数据的本地目录。例如&#xff1a; mkdir -p /minio/path/to/data运行Minio容器&#xff1a…

[Linux/UOS]同一解决方案下的控制台程序依赖SO库的方法

该方法是基于VS2019的远程调试Linux的方案&#xff0c;使用的是UOS系统&#xff0c;本文不会去详述如何远程调试Linux和如何新建解决方案中的.so项目和.out项目 只关注于如何令.out项目依赖.so&#xff0c;并成功调用运行 以一个如上图结构的解决方案为例子&#xff0c;SysInfo…

合肥中科深谷嵌入式项目实战——基于ARM语音识别的智能家居系统(一)

基于ARM语音识别的智能家居系统 我们接下来带大家完成基于语音识别的智能家居系统嵌入式项目实战&#xff0c;使用到stm32开发板&#xff0c;讯飞的离线语音识别&#xff0c;我们在此之前&#xff0c;我们先学习一些Linux系统的基本操作。 。 一、Linux简介 在嵌入式开发中&am…