# 🚀 启动开发服务器

## ❌ 当前问题

```
Failed to load resource: net::ERR_CONNECTION_REFUSED
```

**原因**：开发服务器未运行

---

## ✅ 解决方案

### 方法1: 使用 npm（推荐）

```bash
# 在项目根目录运行
npm run dev
```

---

### 方法2: 使用 yarn

```bash
# 在项目根目录运行
yarn dev
```

---

### 方法3: 使用 pnpm

```bash
# 在项目根目录运行
pnpm dev
```

---

## 🔍 验证服务器启动

### 成功启动的标志

```
✓ Ready in 2.5s
➜ Local:   http://localhost:5173/
➜ Network: http://192.168.x.x:5173/
```

### 访问地址

```
本地访问: http://localhost:5173
网络访问: http://192.168.x.x:5173
```

---

## ⚠️ 常见问题

### 问题1: 端口被占用

**错误提示**:
```
Port 5173 is already in use
```

**解决方案**:
```bash
# 方案A: 关闭占用端口的进程
# Windows
netstat -ano | findstr :5173
taskkill /PID <进程ID> /F

# Mac/Linux
lsof -ti:5173 | xargs kill -9

# 方案B: 使用其他端口
npm run dev -- --port 5174
```

---

### 问题2: 依赖未安装

**错误提示**:
```
Cannot find module 'react'
```

**解决方案**:
```bash
# 安装依赖
npm install
# 或
yarn install
# 或
pnpm install
```

---

### 问题3: Node 版本不兼容

**检查版本**:
```bash
node --version
```

**要求**: Node.js 18+ 或 20+

**更新 Node**:
- 访问 https://nodejs.org/
- 下载并安装最新 LTS 版本

---

## 📝 快速启动步骤

### Step 1: 打开终端

```bash
# Windows: 
# - 在项目文件夹中按住 Shift 键 + 右键
# - 选择 "在此处打开 PowerShell 窗口"

# Mac: 
# - 在项目文件夹中右键
# - 选择 "服务" > "在终端中打开"

# Linux:
# - 在项目文件夹中右键
# - 选择 "在终端中打开"
```

---

### Step 2: 确认在项目根目录

```bash
# 查看当前目录
pwd  # Mac/Linux
cd   # Windows

# 应该看到 package.json 文件
ls package.json    # Mac/Linux
dir package.json   # Windows
```

---

### Step 3: 启动服务器

```bash
npm run dev
```

---

### Step 4: 等待启动完成

```
看到这些信息表示启动成功：
✓ Vite server started
✓ Ready in X.Xs
➜ Local: http://localhost:5173/
```

---

### Step 5: 打开浏览器

```
在浏览器中访问:
http://localhost:5173
```

---

## 🎯 完整操作示例

### Windows PowerShell

```powershell
# 1. 进入项目目录
cd C:\Users\YourName\智慧农业系统

# 2. 安装依赖（首次运行）
npm install

# 3. 启动服务器
npm run dev

# 4. 等待启动完成，看到:
# ➜ Local: http://localhost:5173/

# 5. 浏览器访问 http://localhost:5173
```

---

### Mac/Linux Terminal

```bash
# 1. 进入项目目录
cd ~/Projects/智慧农业系统

# 2. 安装依赖（首次运行）
npm install

# 3. 启动服务器
npm run dev

# 4. 等待启动完成，看到:
# ➜ Local: http://localhost:5173/

# 5. 浏览器访问 http://localhost:5173
```

---

## 🔧 故障排除

### 检查清单

- [ ] ✅ Node.js 已安装（版本 18+）
- [ ] ✅ 在项目根目录（能看到 package.json）
- [ ] ✅ 依赖已安装（运行过 npm install）
- [ ] ✅ 端口 5173 未被占用
- [ ] ✅ 防火墙未阻止
- [ ] ✅ 终端/命令行有管理员权限

---

### 完整重启流程

```bash
# 1. 停止服务器（如果正在运行）
Ctrl + C

# 2. 清理缓存
rm -rf node_modules  # Mac/Linux
rmdir /s node_modules  # Windows

rm -rf .vite  # 清理 Vite 缓存

# 3. 重新安装依赖
npm install

# 4. 启动服务器
npm run dev
```

---

## 📱 访问方式

### 本地访问（推荐）

```
http://localhost:5173
```

**优点**:
- 速度快
- 无需网络
- 最稳定

---

### 网络访问（多设备测试）

```
http://192.168.x.x:5173
```

**使用场景**:
- 手机测试
- 平板测试
- 团队协作

**获取IP地址**:
```bash
# Windows
ipconfig

# Mac/Linux
ifconfig
# 或
ip addr show
```

---

## 🎉 启动成功标志

### 终端输出

```
  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/
  ➜  press h + enter to show help
```

### 浏览器显示

```
✅ 看到登录页面
✅ 可以输入用户名密码
✅ 页面样式正常显示
```

---

## 🔄 开发工作流

### 日常启动

```bash
# 早上开始工作
1. 打开终端
2. cd 到项目目录
3. npm run dev
4. 打开浏览器访问 localhost:5173
```

### 代码修改

```bash
# 修改代码后
1. 保存文件
2. 浏览器自动刷新（热更新）
3. 无需重启服务器
```

### 结束工作

```bash
# 晚上结束工作
1. 在终端按 Ctrl + C
2. 服务器停止
3. 关闭终端
```

---

## 🆘 仍然无法启动？

### 获取详细错误信息

```bash
# 以详细模式运行
npm run dev --verbose
```

### 检查系统环境

```bash
# 检查 Node 版本
node --version

# 检查 npm 版本
npm --version

# 检查项目配置
cat package.json  # Mac/Linux
type package.json  # Windows
```

### 尝试不同端口

```bash
# 使用 3000 端口
npm run dev -- --port 3000

# 使用 8080 端口
npm run dev -- --port 8080
```

---

## 💡 小贴士

### 保持服务器运行

```
⚠️ 不要关闭终端窗口
⚠️ 不要按 Ctrl + C
⚠️ 让服务器在后台运行
```

### 多个项目

```bash
# 每个项目使用不同端口
项目A: npm run dev -- --port 5173
项目B: npm run dev -- --port 5174
项目C: npm run dev -- --port 5175
```

### 性能优化

```bash
# 清理缓存提升性能
npm run dev -- --force
```

---

## 📞 需要帮助？

### 常见问题文档

查看项目中的其他文档：
- `START_SERVER_GUIDE.md` - 详细启动指南
- `TROUBLESHOOTING_GUIDE.md` - 故障排除
- `SYSTEM_STATUS.md` - 系统状态检查

---

## ✅ 总结

### 最简单的启动方式

```bash
# 1. 打开终端
# 2. 进入项目目录
# 3. 运行命令
npm run dev

# 4. 等待看到
➜ Local: http://localhost:5173/

# 5. 浏览器访问
http://localhost:5173
```

**就是这么简单！** 🎉

---

**现在立即执行**: 
```bash
npm run dev
```

然后访问: http://localhost:5173
