204 lines
3.9 KiB
Markdown
204 lines
3.9 KiB
Markdown
# Demo 项目修复说明
|
||
|
||
## ✅ 已完成的修复
|
||
|
||
### 1. 配置更新
|
||
|
||
#### ✅ `src/main.js`
|
||
```javascript
|
||
// 修改为直接使用框架源码
|
||
import AdminFramework from '../../src/index.js'
|
||
```
|
||
|
||
**好处**：
|
||
- 实时调试框架代码
|
||
- 热更新支持
|
||
- 无需重新打包
|
||
|
||
#### ✅ `webpack.config.js`
|
||
添加了框架源码的路径别名：
|
||
```javascript
|
||
alias: {
|
||
'@component': path.resolve(__dirname, '../src/components'),
|
||
'@utils': path.resolve(__dirname, '../src/utils'),
|
||
'@api': path.resolve(__dirname, '../src/api'),
|
||
'@config': path.resolve(__dirname, '../src/config'),
|
||
'@assets': path.resolve(__dirname, '../src/assets')
|
||
}
|
||
```
|
||
|
||
#### ✅ `babel.config.js`
|
||
添加了 JSX 支持：
|
||
```javascript
|
||
presets: [
|
||
'@babel/preset-env',
|
||
'@vue/babel-preset-jsx'
|
||
]
|
||
```
|
||
|
||
#### ✅ `package.json`
|
||
新增依赖：
|
||
- `@vue/babel-preset-jsx@^1.4.0` - JSX 支持
|
||
- `brace@^0.11.1` - 代码编辑器
|
||
- `vue2-ace-editor@^0.0.15` - Ace 编辑器
|
||
|
||
### 2. 脚本文件
|
||
|
||
#### ✅ `install.bat` - 一键安装脚本
|
||
```batch
|
||
双击运行即可安装所有依赖
|
||
```
|
||
|
||
#### ✅ `start.bat` - 启动脚本（已更新）
|
||
```batch
|
||
自动检查并安装缺失的依赖
|
||
```
|
||
|
||
### 3. 文档文件
|
||
|
||
#### ✅ 创建的文档：
|
||
- `README_FIRST.txt` - 首次运行必读 ⭐
|
||
- `启动前必读.md` - 详细启动指南
|
||
- `修复说明.md` - 本文件
|
||
- `CHANGELOG.md` - 更新日志
|
||
|
||
#### ✅ 更新的文档：
|
||
- `README.md` - 项目说明
|
||
- `如何启动.txt` - 快速指南
|
||
|
||
## 🚀 用户需要做什么
|
||
|
||
### 第一步：安装依赖
|
||
|
||
**方式一（推荐）**：
|
||
```bash
|
||
双击 install.bat
|
||
```
|
||
|
||
**方式二**：
|
||
```bash
|
||
cd demo-project
|
||
npm install
|
||
```
|
||
|
||
如果遇到依赖缺失，运行：
|
||
```bash
|
||
npm install @vue/babel-preset-jsx brace vue2-ace-editor
|
||
```
|
||
|
||
### 第二步：启动项目
|
||
|
||
**方式一（推荐）**：
|
||
```bash
|
||
双击 start.bat
|
||
```
|
||
|
||
**方式二**：
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 第三步：访问应用
|
||
|
||
浏览器自动打开 `http://localhost:8080`
|
||
|
||
## 📋 检查清单
|
||
|
||
运行前确保：
|
||
|
||
- [ ] 已进入 `demo-project` 目录
|
||
- [ ] 已运行 `npm install` 或 `install.bat`
|
||
- [ ] 没有 "UNMET DEPENDENCY" 错误
|
||
- [ ] 端口 8080 未被占用
|
||
|
||
验证命令：
|
||
```bash
|
||
npm list --depth=0
|
||
```
|
||
|
||
应该看到：
|
||
```
|
||
✅ @vue/babel-preset-jsx@1.4.0
|
||
✅ brace@0.11.1
|
||
✅ vue2-ace-editor@0.0.15
|
||
✅ vue@2.7.16
|
||
✅ vuex@3.6.2
|
||
✅ vue-router@3.6.5
|
||
✅ view-design@4.7.0
|
||
```
|
||
|
||
## ⚠️ 常见错误及解决
|
||
|
||
### 错误1：UNMET DEPENDENCY
|
||
|
||
**原因**：依赖未安装
|
||
|
||
**解决**：
|
||
```bash
|
||
npm install @vue/babel-preset-jsx brace vue2-ace-editor
|
||
```
|
||
|
||
### 错误2：Cannot find module '../../src/index.js'
|
||
|
||
**原因**：项目结构不正确
|
||
|
||
**解决**：确保目录结构为：
|
||
```
|
||
f:\项目\前端框架项目\
|
||
├── src\ ← 框架源码
|
||
│ └── index.js
|
||
└── demo-project\ ← Demo 项目
|
||
```
|
||
|
||
### 错误3：端口被占用
|
||
|
||
**原因**：8080 端口已被使用
|
||
|
||
**解决**：修改 `webpack.config.js`：
|
||
```javascript
|
||
devServer: {
|
||
port: 8081 // 改成其他端口
|
||
}
|
||
```
|
||
|
||
### 错误4：Babel 编译错误
|
||
|
||
**原因**：JSX preset 未安装
|
||
|
||
**解决**：
|
||
```bash
|
||
npm install @vue/babel-preset-jsx --save-dev
|
||
```
|
||
|
||
## 📊 项目状态
|
||
|
||
| 项目 | 状态 |
|
||
|------|------|
|
||
| 框架源码引用 | ✅ 已配置 |
|
||
| Webpack 配置 | ✅ 已更新 |
|
||
| Babel 配置 | ✅ 已更新 |
|
||
| 依赖列表 | ✅ 已更新 |
|
||
| 安装脚本 | ✅ 已创建 |
|
||
| 启动脚本 | ✅ 已更新 |
|
||
| 文档 | ✅ 已完善 |
|
||
|
||
## 🎯 下一步
|
||
|
||
1. **运行** `install.bat` 安装依赖
|
||
2. **运行** `start.bat` 启动项目
|
||
3. **访问** `http://localhost:8080`
|
||
4. **开始** 开发你的应用！
|
||
|
||
## 📚 相关文档
|
||
|
||
- [README_FIRST.txt](./README_FIRST.txt) - 首次运行必读
|
||
- [启动前必读.md](./启动前必读.md) - 详细指南
|
||
- [CHANGELOG.md](./CHANGELOG.md) - 更新日志
|
||
- [README.md](./README.md) - 完整说明
|
||
|
||
---
|
||
|
||
**修复完成时间**: 2025-10-08
|
||
**修复人员**: AI Assistant
|
||
|