2026-01-06 14:10:24 +08:00
|
|
|
# React + TypeScript + Vite + Antd Design
|
2026-01-05 17:06:16 +08:00
|
|
|
|
|
|
|
|
# 项目运行 About 组件报错, 运行一次下面命令生成.cfg.ts 文件, 后面就可以直接用 vite 命令
|
|
|
|
|
|
|
|
|
|
`$ npm run dev`
|
|
|
|
|
|
|
|
|
|
# 为了权限判断, 不要使用路径参数, 请使用查询参数
|
|
|
|
|
|
|
|
|
|
# 路由库在 router 文件夹
|
|
|
|
|
|
|
|
|
|
# 错误边界库 ErrorBoundary.tsx
|
|
|
|
|
|
|
|
|
|
# 自己搭建的没有详细文档哦
|
|
|
|
|
|
|
|
|
|
- [React](https://react.dev/)
|
|
|
|
|
- [Vite](https://cn.vitejs.dev/)
|
|
|
|
|
- [TypeScript](https://www.typescriptlang.org/zh/)
|
2026-01-06 14:10:24 +08:00
|
|
|
- [Antd Design](https://ant-design.antgroup.com/index-cn/) UI 库
|
2026-01-05 17:06:16 +08:00
|
|
|
- [zustand](https://github.com/pmndrs/zustand) 状态管理库
|
|
|
|
|
- [dnd-kit](https://github.com/clauderic/dnd-kit) 拖拽插件
|
|
|
|
|
|
|
|
|
|
# vscode 安装插件
|
|
|
|
|
|
|
|
|
|
- 语法校验和格式化插件
|
|
|
|
|
`Biome`
|
|
|
|
|
|
|
|
|
|
# 安装 pnpm
|
|
|
|
|
|
|
|
|
|
`$ npm install -g pnpm`
|
|
|
|
|
|
|
|
|
|
# 安装
|
|
|
|
|
|
|
|
|
|
`$ pnpm install 或 pnpm i`
|
|
|
|
|
|
|
|
|
|
# 启动
|
|
|
|
|
|
|
|
|
|
`$ vite`
|
|
|
|
|
|
|
|
|
|
http://localhost:4000/
|
|
|
|
|
|
|
|
|
|
# 打包
|
|
|
|
|
|
|
|
|
|
`$ vite build`
|
|
|
|
|
|
|
|
|
|
# 用 biomejs 替换 eslint 和 prettier, vscode 需要安装 Biome 插件
|
|
|
|
|
|
|
|
|
|
[biome 文档](https://biomejs.dev/guides/getting-started/)
|
|
|
|
|
|
|
|
|
|
# 文件目录(简单)
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
.
|
|
|
|
|
├── README.md
|
|
|
|
|
├── ice.config.mts # The project config
|
|
|
|
|
├── package.json
|
|
|
|
|
├── public
|
|
|
|
|
│ ├── favicon.ico
|
|
|
|
|
├── src
|
|
|
|
|
| ├── assets
|
|
|
|
|
| ├── components # 组件
|
|
|
|
|
| ├── index.html # 入口页面
|
|
|
|
|
| ├── global.css # 全局样式
|
|
|
|
|
| ├── interfaces # 定义类型
|
|
|
|
|
| ├── layout # 布局
|
|
|
|
|
| ├── pages # 页面
|
|
|
|
|
| ├── services # 后台api
|
|
|
|
|
| ├── store # store文件夹
|
|
|
|
|
| ├── routes # 路由文件夹(路由和左侧导航菜单)
|
|
|
|
|
| └── typings.d.ts
|
|
|
|
|
└── tsconfig.json
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
# 请求封装
|
|
|
|
|
|
|
|
|
|
- useRequest(url: string, options) 参数传地址
|
|
|
|
|
- useRequest2(request: any, options) 参数传请求
|
