154 lines
3.3 KiB
Markdown
154 lines
3.3 KiB
Markdown
# Simba-Index
|
||
|
||
本项目是一个基于 TypeScript 和 Next.js 的战队主页模板，用于生成战队主页所需的静态文件，生成后部署在具有 Nginx/OpenResty 环境的网页服务器中分发，以介绍、宣传战队。
|
||
[点击这里](https://www.simba-robotics.com)查看最新部署呈现的效果。
|
||
|
||
---
|
||
|
||
## 项目结构
|
||
|
||
项目的主要目录和文件结构如下：
|
||
|
||
```plaintext
|
||
SimbaIndex/
|
||
├── .next/ # Next.js 构建输出目录
|
||
├── pages/ # 页面组件目录
|
||
│ ├── index.tsx # 首页
|
||
│ ├── history/ # 历史记录页面
|
||
│ │ ├── page.tsx # 历史记录页面主文件
|
||
│ │ ├── layout.tsx # 历史记录页面布局文件
|
||
├── components/ # 可复用的 React 组件
|
||
├── styles/ # 样式文件
|
||
├── public/ # 静态资源文件
|
||
├── package.json # 项目依赖和脚本
|
||
├── tsconfig.json # TypeScript 配置文件
|
||
└── README.md # 项目说明文件
|
||
```
|
||
|
||
---
|
||
|
||
## 开发环境要求
|
||
|
||
在开始开发之前，请确保您的系统满足以下要求：
|
||
|
||
- **Node.js**: 版本 >= 16.x
|
||
- **npm** 或 **yarn**: 用于管理依赖
|
||
- **TypeScript**: 项目使用 TypeScript 编写
|
||
- **Next.js**: 用于服务端渲染和静态站点生成
|
||
|
||
---
|
||
|
||
## 安装依赖
|
||
|
||
在项目根目录下运行以下命令以安装所需依赖：
|
||
|
||
```bash
|
||
# 使用 npm
|
||
npm install
|
||
|
||
# 或使用 yarn
|
||
yarn install
|
||
```
|
||
|
||
---
|
||
|
||
## 启动开发服务器
|
||
|
||
运行以下命令以启动本地开发服务器：
|
||
|
||
```bash
|
||
# 使用 npm
|
||
npm run dev
|
||
|
||
# 或使用 yarn
|
||
yarn dev
|
||
```
|
||
|
||
开发服务器默认运行在 `http://localhost:3000`。
|
||
|
||
---
|
||
|
||
## 编译和构建
|
||
|
||
要生成生产环境的构建版本，请运行以下命令：
|
||
|
||
```bash
|
||
# 使用 npm
|
||
npm run build
|
||
|
||
# 或使用 yarn
|
||
yarn build
|
||
```
|
||
|
||
构建完成后，输出文件将存储在 `.next/` 目录中。
|
||
|
||
---
|
||
|
||
## 调试方法
|
||
|
||
1. **本地调试**：
|
||
- 启动开发服务器后，使用浏览器访问 `http://localhost:3000`。
|
||
- 使用浏览器开发者工具调试页面。
|
||
|
||
2. **VS Code 调试**：
|
||
- 在项目根目录中创建或编辑 `.vscode/launch.json` 文件，添加以下配置：
|
||
|
||
```json
|
||
{
|
||
"version": "0.2.0",
|
||
"configurations": [
|
||
{
|
||
"type": "node",
|
||
"request": "launch",
|
||
"name": "Next.js Debug",
|
||
"program": "${workspaceFolder}/node_modules/next/dist/bin/next",
|
||
"args": ["dev"],
|
||
"cwd": "${workspaceFolder}",
|
||
"protocol": "inspector",
|
||
"port": 9229
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
- 按下 `F5` 启动调试。
|
||
|
||
---
|
||
|
||
## 常见问题
|
||
|
||
### 1. 找不到模块或类型声明
|
||
|
||
如果遇到类似 `找不到模块` 的错误，请运行以下命令安装缺失的依赖：
|
||
|
||
```bash
|
||
npm install
|
||
npm install --save-dev @types/<模块名>
|
||
```
|
||
|
||
### 2. 构建失败
|
||
|
||
确保所有依赖已正确安装，并运行以下命令清理缓存后重新构建：
|
||
|
||
```bash
|
||
npm run clean
|
||
npm run build
|
||
```
|
||
|
||
---
|
||
|
||
## 贡献指南
|
||
|
||
欢迎对本项目提出改进建议或提交代码贡献。请确保在提交代码前运行以下命令以检查代码质量：
|
||
|
||
```bash
|
||
npm run lint
|
||
npm run test
|
||
```
|
||
|
||
---
|
||
|
||
## 许可证
|
||
|
||
本项目基于 [GPL v3.0](LICENSE) 开源。
|