# 微前端架构模板
### 2022.2.9 更新说明
更新 `yarn.lock` 文件,修复部分依赖安装失败问题。
需要 `yarn` 的版本 `>= 1.13.0`。
### 2021.4.26 更新说明
> 将 Static 应用的网络请求更换成 mock 请求。
> 梳理微前端新系列文章大纲
### 2021.3.3 更新说明
> 因服务器到期,所有网络请求均已更换成 mock 请求。
>
> 教程案例统一以最新的 `master` 分支为主,其余分支未更新。
## 介绍
> 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时,它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。
本项目是基于 `qiankun` 搭建的微前端架构 `Demo`,你也可以当成 `qiankun-quick-start` 来使用。
本项目使用 `Vue` 作为主应用基座,嵌入了 `Vue、React、Angular、Jquery...` 等等多个技术栈的微应用,架构图和效果图如下:
![架构图](http://shadows-mall.oss-cn-shenzhen.aliyuncs.com/images/blogs/qiankun_practice/8.png)
![效果图](http://shadows-mall.oss-cn-shenzhen.aliyuncs.com/images/blogs/qiankun_practice/42.png)
## 如何运行
> 本项目使用的端口为 `9999、10100、10200、10300、10400`,运行前请确保这几个端口的空闲。
>
> 全量启动项目会比较慢(`Angular` 微应用第一次启动会很慢),需要耐心等待一会儿,适合只查看项目运行效果的童鞋。
>
> 如果需要调试项目查看效果,建议手动启动主应用和所需的微应用。
本仓库基于 `qiankun` 实现微前端架构,运行命令(全量启动)如下:
```bash
yarn install
yarn examples:install
yarn examples:start
```
## 系列教程
本系列配套教程:
- [基于 qiankun 的微前端最佳实践(万字长文) - 从 0 到 1 篇](https://github.com/a1029563229/Blogs/tree/master/BestPractices/qiankun/Start.md)
- [基于 qiankun 的微前端最佳实践(图文并茂) - 应用部署篇](https://github.com/a1029563229/Blogs/tree/master/BestPractices/qiankun/Deploy.md)
- [基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇](https://github.com/a1029563229/Blogs/tree/master/BestPractices/qiankun/Communication.md)
- [万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇](https://github.com/a1029563229/Blogs/tree/master/Source-Code/qiankun/1.md)
本系列其他文章计划一到两个月内完成,点个 `Star` 不迷路。
计划如下:
- 生命周期篇;
- IE 兼容篇;
- 性能优化、缓存方案篇;
## 分支说明
`master` 为稳定分支,其他分支根据 [qiankun 实战系列教程](https://github.com/a1029563229/blogs) 划分:
- `master`:稳定分支,可以直接作为 `qiankun-quick-start` 使用;
- `feature-inject-sub-apps`:主应用基座搭建、微应用接入方案;
- `feature-deploy`:应用部署发布方案;
- `feature-communication`:官方通信方案;
- `feature-communication-shared`:`Shared` 通信方案;
大家可以根据自己的需求切换分支。
## 关于跨域
由于 `qiankun` 内部使用的是 `Fetch HTML` 的方式加载子应用,所以会遇到跨域问题。我们需要先解决跨域问题,使我们的主应用可以正常加载子应用相关资源。
在开发环境下,本项目配置了跨域解决方案,所以在直接运行项目并不会遇到跨域问题。
生产环境的跨域问题可以参考 `应用部署篇` 的方案。
没有合适的资源?快使用搜索试试~ 我知道了~
微前端架构模板--qiankun.zip
共206个文件
js:41个
ts:26个
json:23个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 31 浏览量
2022-07-14
11:00:50
上传
评论 1
收藏 5.77MB ZIP 举报
温馨提示
微前端架构模板--qiankun
资源推荐
资源详情
资源评论
收起资源包目录
微前端架构模板--qiankun.zip (206个子文件)
.env.basic 226B
browserslist 429B
.browserslistrc 30B
Caddyfile 2KB
nginx.conf 6KB
nginx.prod.conf 6KB
2.35fcc229.chunk.css 547KB
locale.antd.css 503KB
chunk-vendors.662d5e33.css 456KB
flex.css 262B
flex.css 262B
flex.css 262B
styles.css 80B
.editorconfig 274B
.env 49B
.env 23B
.eslintignore 14B
.gitattributes 252B
.gitignore 631B
.gitignore 310B
.gitignore 310B
.gitignore 219B
.gitignore 214B
.gitignore 214B
.gitignore 12B
.gitkeep 0B
index.html 3KB
index.html 3KB
index.html 2KB
index.html 2KB
index.html 2KB
index.html 809B
index.html 792B
index.html 626B
index.html 613B
index.html 613B
index.html 409B
app.component.html 319B
index.html 301B
list.component.html 193B
home.component.html 53B
favicon.ico 4KB
favicon.ico 4KB
favicon.ico 4KB
favicon.ico 4KB
favicon.ico 4KB
favicon.ico 3KB
favicon.ico 3KB
favicon.ico 3KB
favicon.ico 948B
favicon.ico 948B
chunk-vendors.js 5.64MB
chunk-vendors.3233e333.js 1.81MB
main-es5.js 1.46MB
main-es2015.js 1.34MB
app.js 713KB
2.9fe36e6c.chunk.js 687KB
chunk-6a2e3c7a.91514b21.js 11KB
app.df40943e.js 10KB
main.9841e70c.chunk.js 4KB
main.js 2KB
runtime-main.0458a003.js 2KB
index.js 1KB
main.js 1KB
service-worker.js 1KB
config-overrides.js 1KB
config-overrides.js 1KB
karma.conf.js 1KB
protractor.conf.js 808B
vue.config.js 800B
index.js 783B
extra-webpack.config.js 664B
precache-manifest.6c43fe6e1eed8aca2b405753b7150524.js 654B
actions.js 632B
index.js 632B
vue.config.js 583B
index.js 498B
actions.js 475B
index.js 455B
index.js 455B
index.js 450B
.eslintrc.js 351B
plugin.js 320B
index.js 277B
vue.config.js 251B
index.js 247B
public-path.js 214B
public-path.js 150B
babel.config.js 75B
babel.config.js 73B
babel.config.js 73B
public-path.js 0B
package-lock.json 686KB
package-lock.json 479KB
package-lock.json 459KB
package-lock.json 436KB
angular.json 4KB
tslint.json 3KB
package.json 2KB
package.json 2KB
共 206 条
- 1
- 2
- 3
资源评论
紫微前端
- 粉丝: 4282
- 资源: 869
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功