# GarfishDemo

**Repository Path**: wisecloud_v/garfish-demo

## Basic Information

- **Project Name**: GarfishDemo
- **Description**: garfish是一个微前端框架，这个Demo指在集成garfish在vue3+vite环境下提供一个测试环境。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-02
- **Last Updated**: 2026-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# GarfishDemo

## 介绍

GarfishDemo 是一个基于 Garfish 微前端框架的演示项目，旨在集成 Garfish 在 Vue3 + Vite 环境下提供测试环境。该项目展示了微前端架构的完整实践，包含主应用（MainProject）、子应用（SubProject、SubProject2）以及公共组件（PubProject）。

## 软件架构

项目采用微前端架构，由以下模块组成：

- **MainProject（主应用）**：负责整体应用的路由管理、子应用加载与生命周期管理
- **SubProject（子应用1）**：独立部署的业务模块，拥有自己的路由系统
- **SubProject2（子应用2）**：另一个独立部署的业务模块
- **PubProject（公共组件库）**：提供可复用的公共组件

## 技术栈

- Vue 3
- Vite
- Garfish（微前端框架）
- Vue Router

## 安装教程

1. 进入各子项目目录分别安装依赖：
   ```bash
   cd PubProject
   npm install
   npm run build

   cd ../MainProject
   npm install
   
   cd ../SubProject
   npm install
   
   cd ../SubProject2
   npm install
   

   ```

2. 确保各项目依赖安装完成

## 使用说明

1. **启动主应用**：
   ```bash
   cd MainProject
   npm run dev
   ```

2. **启动子应用**（分别在不同端口）：
   ```bash
   # SubProject
   cd SubProject
   npm run dev
   
   # SubProject2
   cd SubProject2
   npm run dev
   ```

3. **公共组件库**：
   ```bash
   ```

4. 访问主应用地址，通过主应用加载各子应用

## 项目结构

```
GarfishDemo/
├── MainProject/          # 主应用
│   ├── src/
│   │   ├── main.js       # 入口文件
│   │   ├── App.vue       # 根组件
│   │   ├── router/       # 路由配置
│   │   └── views/        # 页面视图
│   ├── public/           # 静态资源
│   │   └── statics/      # 子模块配置
│   └── vite.config.js    # Vite 配置
├── SubProject/           # 子应用1
│   ├── src/
│   │   ├── main.js       # 入口文件
│   │   ├── router/       # 路由配置
│   │   └── views/        # 页面视图
│   └── vite.config.js
├── SubProject2/          # 子应用2
│   └── ...
└── PubProject/           # 公共组件库
    ├── src/
    │   ├── components/   # 公共组件
    │   └── main.js
    └── vite.config.js
```

## 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request