以项目名 reactDemo
为例
1. 下载脚手架
在目标文件夹中打开命令行
npm create vite
2. 安装项目依赖
cd reactDemo
npm i
若安装失败,则修改下载源重试
npm config set registry https://registry.npmmirror.com
3. 启动项目
npm run dev
4. 预览项目
浏览器访问 http://localhost:5173/
配置 @ 映射 src 目录
vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
// @ 映射 src 目录
"@": "/src",
},
},
});
配置 vscode 识别 @ 弹出相对路径下拉提示
新增文件 jsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
安装浏览器调试插件 react-developer-tools
下载插件
链接:https://pan.baidu.com/s/1P130eTKIvofSnR5jIhlNqw?pwd=cks7
谷歌浏览器打开插件管理页 chrome://extensions/
将 react-developer-tools.crx 拖入即可
重启浏览器,浏览 react 项目,右键选检查,在开发者调试工具中可见
安装浏览器调试插件 Redux DevTools
下载插件
链接:https://pan.baidu.com/s/1dee7gROO4c261wrf3x6DTQ?pwd=23is
安装方式同上文