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

news2024/11/27 0:50:29

在上一篇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.coloradmin.cn/o/1186159.html

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

相关文章

docker形式简易部署kibana

文章目录 前言一、简易部署1.获取镜像2.启动应用4.访问页面5.总结 前言 记录下使用docker部署kibana服务的过程 一、简易部署 1.获取镜像 docker pull kibana:8.8.0[rootnginx ~]# docker pull kibana:8.8.0 8.8.0: Pulling from library/kibana Digest: sha256:a23d96ae0ae…

​软考-高级-信息系统项目管理师教程 第四版【第21章-项目管理科学基础-思维导图】​

软考-高级-信息系统项目管理师教程 第四版【第21章-项目管理科学基础-思维导图】 课本里章节里所有蓝色字体的思维导图

JVM虚拟机:垃圾回收器之Serial Old(老年代)

本文重点 本文将介绍垃圾回收器在老年代中的串行回收器Serial Old。 介绍 Serial Old是Serial垃圾回收器的老年代版本,它同样是单线程的收集器,使用标记-整理算法,这个收集器也主要运行在Client,目前它主要是作为老年代的CMS收…

高德地图 web js端 出现 INVALID_USER_SCODE 10008 MD5安全码未通过验证

图片意思就是在引入 高德js和css 链接前 引入 <script type"text/javascript">window._AMapSecurityConfig {securityJsCode:您申请的安全密钥,} </script> 到这里就完美结束了

案例 | 3D可视化工具HOOPS助力SolidWorks edrawings成功引入AR/VR技术

HOOPS中文网慧都科技是HOOPS全套产品中国地区指定授权经销商&#xff0c;提供3D软件开发工具HOOPS售卖、试用、中文试用指导服务、中文技术支持。http://techsoft3d.evget.com/达索系统SolidWorks面临的挑战 达索系统SolidWorks公司开发和销售三维CAD设计软件、分析软件和产品…

关于阿里云 ACK ingress部分补充

强调&#xff1a; 本文只是作为记录,过一段时间会删除 跟唐老师学习网络 一 Nginx Ingress管理 ① 流量走向 需求&#xff1a; 应用绑定LoadBalance,会自动创建或使用SLBeip:port --> nodeport_ip:port --> service_ip:port --> pod_ip:port 支持的注解 通过…

程序员找副业有哪几个方向(纯干货)

前序 关于副业对于我自己的看法一般会先从自身的职业去拓展&#xff0c;毕竟自己所在的行业自己会更清楚有哪些资源去获取&#xff0c;那么首先我们可以先问万能的gpt我们程序员做副业有哪些实用的推荐&#xff0c;看看它怎么说的 外包网站接单&#xff1f; 每次大家提到程序…

有效降低数据库存储成本方案与实践 | 京东云技术团队

背景 随着平台的不断壮大&#xff0c;业务的不断发展&#xff0c;后端系统的数据量、存储所使用的硬件成本也逐年递增。从发展的眼光看&#xff0c;业务与系统要想健康的发展&#xff0c;成本增加的问题必须重视起来。目前业界普遍认同开源节流大方向&#xff0c;很多企业部门…

Python之Django框架

目录 一、Web应用 1、什么是Web应用程序 2、什么是Web框架 ​二、手写Web框架 三、Python主流的web框架 四、Django框架版本及下载 五、注意事项 六、基本使用 1、验证是否下载成功 2、常用操作命令 (1)创建django项目 (2)启动django项目 (3)创建应用 七、主要文…

腾讯云3年云服务器价格及购买教程

腾讯云作为国内领先的云计算服务提供商&#xff0c;提供了多种优惠的云服务器套餐&#xff0c;以满足不同用户的需求&#xff0c;本文将详细介绍腾讯云3年云服务器价格及购买教程&#xff0c;新老用户均可购买&#xff01; 1、活动页面&#xff1a;传送门>>> 2、进入…

CentOS7 安装Jenkins 2.414.3 详细教程

目录 1、前提条件硬件软件-java11安装 2、安装jenkins3、启动jenkins配置用户和用户组配置JAVA_HOME 4、配置Jenkins一直处于启动状态5、测试Jenkins是否可以访问以及配置6、访问Jenkins系统 1、前提条件 硬件 内存 4G ; 硬盘 20G 软件-java11安装 上传文件jdk-11.0.21_lin…

phono3py快速安装教程

phono3py是类似于Phonopy的另一款基于第一性原理计算获得材料声学性质并可后处理的功能强大的软件&#xff0c;在以往推送内容中也有介绍基于phono3py 计算晶格热导率VASPphono3py:快速计算晶格热导率 和声子寿命理论到实践&#xff1a;VASPPhono3py计算Phonon Lifetime 以及…

在Gradio实现分栏、分页的效果(二)

继续【Gradio的重要函数以及一些代码示例学习&#xff08;一&#xff09;】 1 fastapigradio的联合使用&#xff1a;mount_gradio_app 1.1 mount_gradio_app一个页面两个模块 分页的效果实现&#xff0c;主要依靠mount_gradio_app&#xff0c;启发于&#xff1a;Support mult…

edge浏览器无法进入中国知网,但可以进入其他网站需要怎么解决

最近使用edge浏览器进入中国知网&#xff0c;加载了很长时间都打不开&#xff0c;好不容易打开了&#xff0c;结果出现&#xff1a;“嗯...无法访问此页面”。即使无法进入知网&#xff0c;但可以进入哔哩哔哩或其他网站&#xff0c;甚是苦恼&#xff0c;下面是一个方法&#x…

谷歌护眼插件Dark Reader下载安装使用

网盘下载地址 链接&#xff1a;https://pan.baidu.com/s/1S086F-9aogPT1NJ2NoUqdw 提取码&#xff1a;ii29使用 前提&#xff1a;只对于谷歌用户&#xff1a; 1、下载后解压获得&#xff1a;Dark Reader v4.9.65.0.crx 2、然后把后缀改成.zip 3、再次解压出文件 4、然后把里…

在Spring Boot中使用MyBatis访问数据库

MyBatis&#xff0c;这个对各位使用Java开发的开发者来说还是蛮重要的&#xff0c;我相信诸位在企业开发项目的时候&#xff0c;大多数采用的是Mybatis。使用MyBatis帮助我们解决各种问题&#xff0c;实际上这篇文章&#xff0c;基本上默认为可以跳过的一篇&#xff0c;但是为了…

修改Launcher3 图标为圆角

packages\apps\Launcher3\res\xml\folder_shapes.xml packages\apps\Launcher3\src\com\android\launcher3\graphics\IconShape.java 上述文件的解析在 IconShape中 private static List<IconShape> getAllShapes(Context context) {ArrayList<IconShape> resul…

13.求面积[有问题]

#include<stdio.h> #include<math.h> #include<bits/stdc.h> using namespace std;void fun(double a,b,c) {double p,c;p (abc)/2;c sqrt(p*(p-a)*(p-b)*(p-c));printf("面积是&#xff1a;%lf",c); }int main(){double a,b,c;scanf("%lf,%…

OOM排查

OOM排查 一&#xff0c;原因 1.一次性申请对象太多&#xff0c;创建了大量对象&#xff0c;尤其从表中读取了大量数据&#xff0c;循环中大量创建对象&#xff0c;放入list中。方案&#xff1a;限量 2.内存资源耗尽为释放&#xff0c;如connction&#xff0c;线程。方案&#…

margin-bottom、margin-top设置不起效

问题&#xff1a; 如下&#xff0c;在uniapp项目中使用了tag标签&#xff0c;设置margin时&#xff0c;只有margin-left、margin-right生效&#xff0c;margin-bottom、margin-top设置不起效。f12直接在元素中修改也无效。 原因&#xff1a; uni-ui中的tag标签是行内元素&…