# 微前端

**Repository Path**: theGreatWallCCG/micro-frontends

## Basic Information

- **Project Name**: 微前端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-19
- **Last Updated**: 2025-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🚀 Micro-App 微前端项目

基于 **Micro-App** + **Vite** + **Vue 3** + **TypeScript** 的微前端架构示例项目。

## 📁 项目结构

```
微应用/
├── main-app/          # 主应用（端口: 3000）
│   ├── Element Plus UI 组件库
│   ├── Micro-App 微前端框架
│   └── 侧边栏菜单导航
├── sub-app-1/         # 子应用1（端口: 3001，紫色主题）
│   └── 3个页面
├── sub-app-2/         # 子应用2（端口: 3002，粉色主题）
│   └── 3个页面
├── sub-app-3/         # 子应用3（端口: 3003，绿色主题）
│   └── 3个页面
├── package.json       # 根配置文件
└── pnpm-workspace.yaml # pnpm workspace 配置
```

## ✨ 技术栈

### 主应用

- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - 类型安全
- **Vite** - 极速构建工具
- **Vue Router** - 路由管理
- **Element Plus** - UI 组件库
- **Micro-App** - 微前端框架

### 子应用

- **Vue 3 + TypeScript + Vite**
- **Vue Router** - 独立路由
- **响应式设计** - 现代化 UI

## 🎯 核心特性

- ✅ **零侵入** - 子应用几乎无需改造
- ✅ **独立开发** - 各应用独立运行和部署
- ✅ **技术栈无关** - 支持任意框架
- ✅ **样式隔离** - 天然的样式隔离
- ✅ **统一管理** - pnpm workspace 统一依赖管理

## 📦 安装依赖

### 前置要求

- Node.js >= 16
- pnpm >= 8

### 安装所有依赖

```bash
# 安装 pnpm（如果没有）
npm install -g pnpm

# 安装所有项目依赖
pnpm install
```

## 🚀 运行项目

### 方式一：一键启动所有应用（推荐）

```bash
pnpm dev
```

这会并行启动主应用和所有子应用。

### 方式二：单独启动

```bash
# 启动主应用
pnpm dev:main

# 启动子应用1
pnpm dev:sub1

# 启动子应用2
pnpm dev:sub2

# 启动子应用3
pnpm dev:sub3
```

## 🌐 访问地址

启动后访问：

- **主应用**: http://localhost:3000
- **子应用 1**: http://localhost:3001
- **子应用 2**: http://localhost:3002
- **子应用 3**: http://localhost:3003

> ⚠️ **注意**：必须同时启动主应用和子应用才能正常使用微前端功能。

## 📝 使用说明

1. **启动所有应用**

   ```bash
   pnpm dev
   ```

2. **打开浏览器访问主应用**

   ```
   http://localhost:3000
   ```

3. **通过左侧菜单导航**
   - 点击"首页"查看主应用
   - 展开"子应用 1/2/3"查看各子应用的页面
   - 每个子应用都有 3 个独立页面

## 🏗️ 构建生产版本

```bash
# 构建所有应用
pnpm build

# 单独构建主应用
pnpm --filter main-app build

# 单独构建子应用1
pnpm --filter sub-app-1 build
```

## 🔧 开发指南

### 添加新的子应用

1. 创建新的 Vue 项目
2. 在 `pnpm-workspace.yaml` 中添加路径
3. 在主应用的路由中注册
4. 在主应用的菜单中添加入口

### 子应用配置要点

子应用需要配置 CORS：

```typescript
// vite.config.ts
export default defineConfig({
  server: {
    cors: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
});
```

### 主应用配置要点

在 Vite 配置中声明 micro-app 为自定义元素：

```typescript
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "micro-app",
        },
      },
    }),
  ],
});
```

## 📚 相关文档

- [Micro-App 官方文档](https://micro-zoe.github.io/micro-app/)
- [Vue 3 文档](https://cn.vuejs.org/)
- [Vite 文档](https://cn.vitejs.dev/)
- [Element Plus 文档](https://element-plus.org/zh-CN/)
- [pnpm Workspace](https://pnpm.io/zh/workspaces)

## 🤝 常见问题

### Q: 子应用加载失败？

A: 确保所有应用都已启动，检查端口是否被占用。

### Q: 样式冲突？

A: Micro-App 提供了天然的样式隔离，一般不会冲突。

### Q: 如何在应用间通信？

A: 使用 Micro-App 提供的数据通信 API，详见官方文档。

## 📄 License

MIT

---

**享受微前端开发！** 🎉