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

news/2024/7/14 21:28:55 标签: react.js, 前端, 前端框架

在上一篇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.niftyadmin.cn/n/5163301.html

相关文章

Android MotionLayout

MotionLayout exends ConstraintLayout(动画框架 过渡) View动画 API1 属性动画API11 过渡动画API18 root.width RootViewWidth TransitionManager.beginDelayedTransition(view) 过渡动画 可以改变其大小和流畅性 Fade 可以改变透明度 通过TrasitinManager管理 Go:动态替…

能介绍一下Git的分支管理功能吗?

Git 的分支管理功能是它最强大和受欢迎的特性之一。分支在 Git 中是指开发人员可以在同一个代码仓库中创建的独立工作流。下面是 Git 分支管理的一些关键概念: 主分支(Master/Main Branch):主分支是 Git 仓库的默认分支&#xff…

flink的带状态的RichFlatMapFunction函数使用

背景 使用RichFlatMapFunction可以带状态来决定如何对数据流进行转换,而且这种用法非常常见,根据之前遇到过的某个key的状态来决定再次遇到同样的key时要如何进行数据转换,本文就来简单举个例子说明下RichFlatMapFunction的使用方法 RichFl…

c语言练习第10周(6~10)

输入样例S -4.8 -8.0 -2.9 6.7 -7.0 2.6 6.5 1.7 1.9 5.6 -1.6 -6.3 -4.3 1.5 8.7 -0.3 5.4 -9.3 4.8 7.0 3.6 -8.3 -1.0 1.3 -9.9 9.7 -6.3 5.8 2.9 2.9 -7.7 4.9 -0.6 7.2 6.4 7.7 2.8 -5.8 -0.0 2.2 4.0 7.7 -3.0 -7.5 -3.5 9.7 …

【系统集成项目管理工程师】——2.技术

信息与信息化 信息技术核心:信息的传输技术 信息技术三大支柱:传感技术、计算机技术、通信技术 时间敏感网络TSN能够帮助实现信息技术(IT)与运营技术(OT)融合,统一的网络能够减少开发部署成本,降低控制器等产品网络配…

C#与Java计算俩个时间的差的方法

C# // 创建两个 DateTime 对象 DateTime dateTime1 new DateTime(2023, 9, 25); DateTime dateTime2 new DateTime(2026, 10, 10);// 计算两个 DateTime 之间的差异 TimeSpan timeSpan dateTime2 - dateTime1;// 获取差异中的天数 int days timeSpan.Days;Console.W…

通过创建自定义标签来扩展HTML

使用HTML时&#xff0c;例如&#xff0c;使用<b>标记显示粗体文本。 如果需要列表&#xff0c;则对每个列表项使用<ul>标记及其子标记<li> 。 标签由浏览器解释&#xff0c;并与CSS一起确定网页内容的显示方式以及部分内容的行为。 有时&#xff0c;仅使用一…

ansible 执行速度优化参考 —— 筑梦之路

配置ansible 1. 开启SSH长连接 # openssh 5.6 之后支持sh_args -o ControlMasterauto -o ControlPersist5d# ControlPersist5d这个参数是设置整个长连接保持时间这里设置为5天。 # 如果开启后&#xff0c;通过SSH连接过的设备都会在当前ansible/cp/目录下生成一个socket文件…