# ⚠️ 启动前必读

## 📦 第一步：安装依赖

**在 `demo-project` 目录下**运行：

```bash
npm install
```

如果遇到依赖缺失错误，运行：

```bash
npm install @vue/babel-preset-jsx brace vue2-ace-editor --save
```

## 🚀 第二步：启动项目

### 方式一：使用脚本（推荐）

**Windows 用户**：
```bash
双击 start.bat
```

**Linux/Mac 用户**：
```bash
./start.sh
```

### 方式二：手动启动

```bash
npm run dev
```

## ✅ 验证安装

运行以下命令检查依赖是否完整：

```bash
npm list --depth=0
```

应该看到以下关键依赖：
- ✅ @vue/babel-preset-jsx
- ✅ brace
- ✅ vue2-ace-editor
- ✅ vue
- ✅ vuex
- ✅ vue-router
- ✅ view-design

## 🔍 常见问题

### 问题1：依赖缺失

**症状**：看到 "UNMET DEPENDENCY" 错误

**解决**：
```bash
# 删除依赖重装
rm -rf node_modules
rm package-lock.json
npm install
```

### 问题2：端口被占用

**症状**：8080 端口已被占用

**解决**：修改 `webpack.config.js` 中的端口
```javascript
devServer: {
  port: 8081  // 改成其他端口
}
```

### 问题3：路径找不到

**症状**：无法找到 ../../src/index.js

**解决**：确保项目结构正确
```
f:\项目\前端框架项目\
├── src\                # ← 框架源码
│   └── index.js       # ← 框架入口
└── demo-project\      # ← Demo 项目
    └── src\
        └── main.js    # ← 引用 ../../src/index.js
```

## 📝 项目说明

本项目直接使用框架源码（不是打包文件），好处：
- ✅ 实时调试
- ✅ 热更新
- ✅ 方便开发

## 🎯 访问地址

启动后访问：`http://localhost:8080`

可用页面：
- `/login` - 登录页面
- `/home` - 主页
- `/business/product` - 产品列表示例

---

**如有问题，请查看**：
- [CHANGELOG.md](./CHANGELOG.md) - 更新日志
- [README.md](./README.md) - 完整说明
- [如何启动.txt](./如何启动.txt) - 快速指南