react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）

移动开发2024-05-14 21:57:23

以项目名 reactDemo为例

1. 下载脚手架

在目标文件夹中打开命令行

npm create vite

react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）,react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）_react,第1张

2. 安装项目依赖

cd reactDemo
npm i

若安装失败，则修改下载源重试

npm config set registry https://registry.npmmirror.com

3. 启动项目

npm run dev

react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）,react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）_react_02,第2张

4. 预览项目

浏览器访问 http://localhost:5173/

react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）,react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）_react_03,第3张

安装浏览器调试插件 react-developer-tools

下载插件

链接：https://pan.baidu.com/s/1P130eTKIvofSnR5jIhlNqw?pwd=cks7

谷歌浏览器打开插件管理页 chrome://extensions/
将 react-developer-tools.crx 拖入即可

react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）,react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）_重启_04,第4张

重启浏览器，浏览 react 项目，右键选检查，在开发者调试工具中可见

react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）,react【实用教程】搭建开发环境（2024版）Vite+React （官方推荐）_重启_05,第5张

1. 下载脚手架