1.构建项目 并启动项目
npx create-vite@latest practice-react-ts -- --template react-ts
// 进入项目根目录 ，Node.js 版本需要 20.19+ 或者 22.12+
npm run dev
2.安装依赖
npm install
npm install sass
npm install axios
// 安装 lodash
npm install lodash --save
// 安装 classNames
npm install classnames --save
//安装uuid
npm install uuid //用法 uuidv4()
//安装dayjs
npm install dayjs // dayjs().format('YYYY-MM-DD HH:mm:ss')
//安装redux
npm install @reduxjs/toolkit react-redux
3.引用
// 全部引入
import _ from 'lodash';
//按需引入
import _find from 'lodash/find';
import _orderBy from 'lodash/orderBy';
import _remove from 'lodash/remove';
4.前端自己搭建模拟API服务
// 全局安装（一次安装，全局可用）
npm install -g json-server //快速搭建一个模拟的 API 服务器
//在项目根目录新建mockdata文件夹，然后把数据放入db.json文件中，然后再package.json中加入
"server": "json-server --watch mockdata/db.json --port 10034"
//db.json文件
{
"users": [
{ "id": 1, "name": "张三", "age": 25 },
{ "id": 2, "name": "李四", "age": 30 }
],
"posts": [
{ "id": 1, "title": "JSON-Server 教程", "content": "超简单！" }
]
}
//接口地址
http://localhost:10034/users
http://localhost:10034/posts
image.png
注意事项
1.img路径问题
img引入的图片路径可以放在public中，如果放在src中，需要import引入后在使用，或者使用
let picture ="../assets/img/1.png";
<img src={new URL(picture, import.meta.url).href}/>
