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`
|