# 学习微前端之singleSPA

**Repository Path**: xiaoxfa/learn-single-spa

## Basic Information

- **Project Name**: 学习微前端之singleSPA
- **Description**: No description available
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-02
- **Last Updated**: 2021-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 学习微前端之 single-spa

这是一个学习项目。

## 操作步骤

### 1. 启动两个vue项目

参考 `child-vue` 和 `parent-vue` 两个文件夹，vue只需要设置 babel和router即可。

### 2. 准备配置 上

下面都是修改 `child-vue` 文件夹：

- 添加 `single-spa-vue` 依赖，截至2021-02-02版本是`2.1.0` 
- 修改 `child-vue/src/main.js`，引入依赖，改变挂载，导出生命周期
- 补充 `vue.config.js` 文件，修改打包方式、设置开发端口

接下来修改 `parent-vue` 文件夹：

- 修改 `parent-vue/src/App.vue` router跳转为并不存在的 `child-vue` 页面，显然后面会劫持这个路由
- 安装 `single-spa` 依赖，进行配置，注册应用、启动应用
- 此时运行父应用，点击路由可以看到打印的log

接下来启动两个项目：

- 父应用可以访问，点击看到log
- 子应用可以看到 app.js 和 chunke-vendors.js 两个文件

## 3 配置下
继续修改 `parent-vue/src/main.js` 文件，完善 `registerApplication` 内的配置，我们载入远程js

此时再启动两个项目，访问路由就可以正常跳转了。虽然还有
- 样式隔离的问题
- 子路由访问失败的问题

接下来：
- 修改子应用的 `child-vue/src/router/index.js` 的baseURL，先写死
- 要解决后续跳转的路径问题

继续修改 `child-vue/src/main.js` 设定绝对路径的baseurl

缺点比较明显：
- 样式不隔离，js沙箱
- 不灵活，书写比较多

继续补充一些main的代码，让child-vue 可以独立跑起来。

此时，项目就接近完整了。