react+vite创建

要在本地初始化一个结合了React和Vite的项目,你可以遵循以下步骤:

1、安装Node.js:

确保你的机器上已安装了Node.js。如果未安装,请前往Node.js官网下载并安装。

2、使用终端或命令提示符:

打开你的终端(在macOS或Linux系统中)或命令提示符/PowerShell(在Windows系统中)。

3、创建新项目:

使用Vite提供的模板来创建一个新的React项目。运行以下命令:

js 复制代码
npm create vite@latest my-react-app -- --template react

或者如果你使用yarn作为包管理器,则运行:

js 复制代码
yarn create vite my-react-app --template react

这里的my-react-app是你想要创建的项目名称,你可以更改为任何你喜欢的名称。

4、进入项目目录:

创建完项目后,切换到项目目录中去:

js 复制代码
cd my-react-app

5、安装依赖:

在项目文件夹内,安装项目依赖:

js 复制代码
npm install

或使用yarn:

js 复制代码
yarn install

6、启动开发服务器:

使用以下命令启动本地开发服务器:

js 复制代码
npm run dev

或者如果你使用yarn:

js 复制代码
yarn dev

访问应用:

默认情况下,Vite将会在本地的3000端口启动应用程序(如果该端口已被占用,Vite会尝试使用下一个可用端口)。在浏览器中打开 http://localhost:3000 查看你的React应用。

这样你就完成了使用Vite和React初始化项目的基础设置,现在你可以开始开发你的React应用了。

相关推荐
xiaoxue..4 分钟前
React Hooks :useRef、useState 与受控/非受控组件全解析
前端·react.js·前端框架
释怀不想释怀15 分钟前
vue(登录,退出,浏览器本地存储机制)
前端·javascript·vue.js·ajax·html
wh_xia_jun15 分钟前
vue 3极简教程草稿(未完成)
前端·javascript·vue.js
38242782723 分钟前
Edge开发者工具:保留日志与禁用缓存详解
java·前端·javascript·python·selenium
web小白成长日记33 分钟前
什么是margin重叠,如何解决
前端·css·html·css3
凌乱风雨12111 小时前
从源码角度解析C++20新特性如何简化线程超时取消
前端·算法·c++20
两个西柚呀1 小时前
每日前端面试题-css塌陷
前端·css
IT_陈寒1 小时前
Vite 5大实战优化技巧:让你的开发效率提升200%|2025前端工程化指南
前端·人工智能·后端
C_心欲无痕1 小时前
react - createPortal魔法传送门
javascript·vue.js·react.js
未来之窗软件服务1 小时前
幽冥大陆(八十八 ) 操作系统应用封装技术C#自解压 —东方仙盟练气期
java·前端·c#·软件打包·仙盟创梦ide·东方仙盟·阿雪技术观