# micro-app-admin

**Repository Path**: chenhaixiao/micro-app-admin

## Basic Information

- **Project Name**: micro-app-admin
- **Description**: 微前端的应用的开发
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-28
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微前端框架示例项目

基于 Vue 3 + TypeScript + Vite 构建的微前端框架示例项目，集成了阿里乾坤 (Qiankun) 和京东 MicroApp 两种主流微前端方案。

## 项目特性

### 核心技术栈

- Vue 3 + TypeScript + Vite
- Pinia 状态管理
- Vue Router 路由管理
- ESLint 代码规范

### 微前端方案

- **阿里乾坤 (Qiankun)**：基于 single-spa 封装，提供了更加开箱即用的 API
- **京东 MicroApp**：基于类 WebComponent 进行渲染，从组件化的思维实现微前端

### 项目结构

```
src/
├── main.ts              # 应用入口
├── App.vue              # 根组件
├── micro-app/           # 微前端配置
├── router/              # 路由配置
├── stores/              # 状态管理
└── views/               # 页面组件
    ├── config/          # 配置管理
    ├── process/         # 流程管理
    ├── HomeView.vue     # 首页
    ├── AboutView.vue    # 关于页
    ├── LoginView.vue    # 登录页
    └── MicroAppView.vue # 微应用容器
```

## 安装和运行

### 安装依赖

```bash
npm install
```

### 开发环境运行

```bash
npm run dev
```

### 生产环境构建

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 微前端配置

### 阿里乾坤 (Qiankun) 配置

- 主应用注册微应用：`src/micro-app/index.ts`
- 微应用生命周期函数：在微应用的 `main.ts` 中导出

### 京东 MicroApp 配置

- 主应用初始化：`src/main.ts`
- 嵌入子应用：使用 `<micro-app>` 组件

## 样式和主题

- 使用 CSS 自定义属性（变量）实现主题管理
- 响应式设计，适配不同屏幕尺寸
- 现代化的 UI 设计，包括渐变、阴影和动画效果

## 代码规范

- 使用 ESLint 进行代码规范检查
- 遵循 Vue 3 最佳实践
- 使用 TypeScript 确保类型安全

## 浏览器兼容性

- 现代浏览器（Chrome, Firefox, Safari, Edge）
- 支持 IE 11 需要额外配置

## 许可证

MIT