108 lines
2.4 KiB
Markdown
108 lines
2.4 KiB
Markdown
|
# Urban Lifeline Web 微前端项目
|
|||
|
|
|
|||
|
|
基于 Import Maps 的微前端架构，包含共享模块和多个业务应用。
|
|||
|
|
|
|||
|
|
## 📦 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
urbanLifelineWeb/
|
|||
|
|
├── packages/
|
|||
|
|
│ ├── shared/ # 共享模块 (端口 5000)
|
|||
|
|
│ ├── platform/ # 主平台应用 (端口 5001)
|
|||
|
|
│ ├── bidding/ # 招标管理应用 (端口 5002)
|
|||
|
|
│ └── workcase/ # 案例管理应用 (端口 5003)
|
|||
|
|
└── package.json
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🚀 快速开始
|
|||
|
|
|
|||
|
|
### 1. 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 一键安装所有包的依赖
|
|||
|
|
npm run install:all
|
|||
|
|
|
|||
|
|
# 或单独安装
|
|||
|
|
npm run install:shared
|
|||
|
|
npm run install:platform
|
|||
|
|
npm run install:bidding
|
|||
|
|
npm run install:workcase
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 启动开发服务器
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 同时启动所有服务
|
|||
|
|
npm run dev:all
|
|||
|
|
|
|||
|
|
# 或单独启动
|
|||
|
|
npm run dev:shared # http://localhost:5000
|
|||
|
|
npm run dev:platform # http://localhost:5001
|
|||
|
|
npm run dev:bidding # http://localhost:5002
|
|||
|
|
npm run dev:workcase # http://localhost:5003
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 构建生产版本
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 构建所有应用
|
|||
|
|
npm run build:all
|
|||
|
|
|
|||
|
|
# 或单独构建
|
|||
|
|
npm run build:shared
|
|||
|
|
npm run build:platform
|
|||
|
|
npm run build:bidding
|
|||
|
|
npm run build:workcase
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🌐 端口分配
|
|||
|
|
|
|||
|
|
| 服务 | 端口 | 说明 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| Shared | 5000 | 共享组件和工具库 |
|
|||
|
|
| Platform | 5001 | 主平台应用 |
|
|||
|
|
| Bidding | 5002 | 招标管理应用 |
|
|||
|
|
| Workcase | 5003 | 案例管理应用 |
|
|||
|
|
|
|||
|
|
## 🔧 技术栈
|
|||
|
|
|
|||
|
|
- **框架**: Vue 3.5 + TypeScript
|
|||
|
|
- **构建工具**: Vite 6.0
|
|||
|
|
- **UI 组件库**: Element Plus 2.9
|
|||
|
|
- **状态管理**: Pinia 2.2
|
|||
|
|
- **路由**: Vue Router 4.5
|
|||
|
|
- **工具库**: VueUse
|
|||
|
|
|
|||
|
|
## 📝 开发说明
|
|||
|
|
|
|||
|
|
### Import Maps
|
|||
|
|
|
|||
|
|
本项目使用 Import Maps 实现模块共享：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<script type="importmap">
|
|||
|
|
{
|
|||
|
|
"imports": {
|
|||
|
|
"@shared/components": "http://localhost:5000/shared/components.js",
|
|||
|
|
"@shared/utils": "http://localhost:5000/shared/utils.js",
|
|||
|
|
"@shared/api": "http://localhost:5000/shared/api.js"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### API 代理
|
|||
|
|
|
|||
|
|
所有应用的 `/api` 请求会代理到后端服务 `http://localhost:8080`
|
|||
|
|
|
|||
|
|
### 跨域配置
|
|||
|
|
|
|||
|
|
开发环境下所有服务已启用 CORS，支持跨域访问。
|
|||
|
|
|
|||
|
|
## 🔥 注意事项
|
|||
|
|
|
|||
|
|
1. **启动顺序**: 建议先启动 `shared` 服务，再启动其他应用
|
|||
|
|
2. **端口占用**: 确保 5000-5003 端口未被占用
|
|||
|
|
3. **Node 版本**: 建议使用 Node.js 18+
|
|||
|
|
4. **依赖安装**: 首次运行前必须执行 `npm run install:all`
|