146 lines
2.8 KiB
Markdown
146 lines
2.8 KiB
Markdown
# 🚀 快速修复指南
|
||
|
||
## ❌ 常见错误用法
|
||
|
||
### 1. 错误的 HTTP 导入
|
||
```javascript
|
||
// ❌ 错误！不要这样写
|
||
import http from '@/utils/admin-framework.js'
|
||
import { http } from 'admin-framework'
|
||
|
||
// ✅ 正确！直接使用
|
||
this.$http.get('/api/xxx')
|
||
window.framework.http.get('/api/xxx')
|
||
```
|
||
|
||
### 2. 错误的工具函数导入
|
||
```javascript
|
||
// ❌ 错误！不要这样写
|
||
import tools from 'admin-framework/tools'
|
||
|
||
// ✅ 正确！直接使用
|
||
this.$tools.formatDate(new Date())
|
||
window.framework.tools.formatDate(new Date())
|
||
```
|
||
|
||
## ✅ 正确的使用方式
|
||
|
||
### 在 Vue 组件中
|
||
|
||
```vue
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// ✅ 从配置中获取
|
||
uploadUrl: this.$config.uploadUrl
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
async loadData() {
|
||
// ✅ 使用 this.$http
|
||
const res = await this.$http.get('/api/users')
|
||
|
||
// ✅ 使用 this.$tools
|
||
const date = this.$tools.formatDate(new Date(), 'yyyy-MM-dd')
|
||
|
||
// ✅ 使用 this.$uiTool
|
||
this.$uiTool.success('操作成功')
|
||
|
||
// ✅ 路由跳转使用 path
|
||
this.$router.push({ path: '/home' })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 在 API 模块中
|
||
|
||
```javascript
|
||
// src/api/ball/gamesServer.js
|
||
|
||
class GamesServer {
|
||
async getList(params) {
|
||
// ✅ 使用 window.framework.http
|
||
return await window.framework.http.post('/games/page', params)
|
||
}
|
||
}
|
||
|
||
export default new GamesServer()
|
||
```
|
||
|
||
### 在组件中使用 API
|
||
|
||
```vue
|
||
<script>
|
||
import gamesServer from '@/api/ball/gamesServer.js'
|
||
|
||
export default {
|
||
methods: {
|
||
async loadData() {
|
||
const res = await gamesServer.getList({ page: 1, size: 20 })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 📝 修改步骤
|
||
|
||
### 步骤1：修改所有 API 文件
|
||
|
||
查找并替换：
|
||
```javascript
|
||
// 查找
|
||
import http from '@/utils/admin-framework.js'
|
||
http.http.get(...)
|
||
|
||
// 替换为
|
||
window.framework.http.get(...)
|
||
```
|
||
|
||
### 步骤2：修改路由跳转
|
||
|
||
查找并替换：
|
||
```javascript
|
||
// 查找
|
||
this.$router.push({ name: 'xxx' })
|
||
|
||
// 替换为
|
||
this.$router.push({ path: '/xxx/yyy' })
|
||
```
|
||
|
||
### 步骤3：重新构建框架
|
||
|
||
```bash
|
||
# 在项目根目录
|
||
npm run build
|
||
```
|
||
|
||
### 步骤4：测试
|
||
|
||
```bash
|
||
# 在 demo 目录
|
||
cd demo
|
||
npm run dev
|
||
```
|
||
|
||
## 🔍 检查清单
|
||
|
||
- [ ] 所有 API 文件都使用 `window.framework.http`
|
||
- [ ] 所有路由跳转都使用 `path` 而不是 `name`
|
||
- [ ] 组件中使用 `this.$http`、`this.$tools`、`this.$uiTool`
|
||
- [ ] 组件映射表已配置（`demo/src/router/component-map.js`）
|
||
- [ ] 框架已重新构建（`npm run build`）
|
||
- [ ] Demo 可以正常运行（`cd demo && npm run dev`）
|
||
|
||
## 📚 更多说明
|
||
|
||
详细使用说明请查看：
|
||
- `demo/使用说明.md` - 完整的使用指南
|
||
- `demo/src/api/ball/gamesServer.js` - API 模块示例
|
||
- `_doc/完整使用文档.md` - 框架完整文档
|
||
|