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.hqwc.cn/news/165142.html

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

相关文章

如何实现单病种上报的多院区/集团化/平台联动管理

背 景 米软售前人员在了解客户单病种上报的相关需求中发现,部分医院分为本部、分部或总院、分院等多个院区,各院区需共用一套系统;部分医院与其他兄弟医院隶属于同一集团医院,全集团需统一部署;部分市/区卫健委要求全…

休闲玩具的软文营销策略

休闲玩具行业作为新兴市场,具有广阔的发展前景,生活水平的提高带来消费观念的升级,城市化进程加速导致人们对休闲娱乐的需求持续上涨,玩具作为娱乐性、放松性、互动性的产品受到广大群体喜爱,休闲玩具市场的竞争也愈发…

视频特效编辑软件 After Effects 2022 mac中文版介绍 (ae 2022)

After Effects 2022 mac是一款视频特效编辑软件,被称为AE,拥有强大的特效工具,旋转,用于2D和3D合成、动画制作和视觉特效等,效果创建电影级影片字幕、片头和过渡,是一款可以帮助您高效且精确地创建无数种引…

js处理赎金信

给你两个字符串:ransomNote 和 magazine ,判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以,返回 true ;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1: 输入&…

Javascript知识点详解:对象、New命令、Object对象的相关方法

目录 对象 对象是什么 构造函数 new 命令 基本用法 new 命令的原理 new.target Object.create() 创建实例对象 Object 对象的相关方法 Object.getPrototypeOf() Object.setPrototypeOf() Object.create() Object.prototype.isPrototypeOf() Object.prototype.__p…

Ubuntu18.04安装pcl-1.12.1,make时报错:/usr/bin/ld: cannot find -lvtkIOMPIImage

解决方案: 在vtk安装包中,重新打开cmake-gui,然后勾选上VTK_Group_MPI和VTK_Group_Imaging。 cd VTK-8.2.0 cd build cmake-gui然后重新编译生成。 make -j8 # 或者j4,量力而行。 sudo make install 就可以解决了。 然后重新回到pcl安装…

SOLIDWORKS --流体仿真篇

SIMULIA流体仿真是什么? 模拟并预测复杂环境下围绕和穿过实体和结构的稳态及瞬态的内外部流(包括热传递),例如湍流气流、颗粒运动、表面沉积等 .提供定性、定量以及可视化的分析手段,可实现多尺度多物理的视觉效果 SIMULIA流体仿真能做什么? 1.高效的仿真前处理…

如何在Python爬虫中使用IP代理以避免反爬虫机制

目录 前言 一、IP代理的使用 1. 什么是IP代理? 2. 如何获取IP代理? 3. 如何使用IP代理? 4. 如何避免IP代理失效? 5. 代理IP的匿名性 二、代码示例 总结 前言 在进行爬虫时,我们很容易会遇到反爬虫机制。网站…

chrome 一些详细信息查找的地方

可以获得chrome 信息的列表 缓存 #缓存位置# 浏览器事件

基于8086家具门安全控制系统设计

**单片机设计介绍,基于8086家具门安全控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 # 8086家具门安全控制系统设计介绍 8086家具门安全控制系统是一种用于保护家具和保证室内安全的系统。该系统基于808…

微信小程序:怎么在一个js中修改另一个js的数据(这里通过缓存进行实现)

实例:现有两个页面index.js和category.js,我现在想在index.js中修改category.js的数据 初始数据 category [{name: 物流配送,list: [{id: 1,job: 外卖骑手,checked: true}, {id: 2,job: 快递员,checked: false}, {id: 3,job: 司机,checked: false}, {id: 4,job: …

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 …