基于single-spa的微前端项目

最新推荐文章于 2023-02-22 21:16:48 发布

qq_42123928

最新推荐文章于 2023-02-22 21:16:48 发布

阅读量1k

点赞数

分类专栏： vue JS 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_42123928/article/details/116330842

版权

本文介绍了如何基于single-spa实现微前端项目，详细阐述了主要技术，包括single-spa作为主子应用桥梁，systemjs用于浏览器端模块异步加载，以及single-spa-vue作为vue子应用的插件。同时，文章详细展示了父应用的改造过程，如使用systemjs加载子应用，以及子应用的创建和配置，强调了父子应用间的通信和资源共享。

摘要由CSDN通过智能技术生成

前言

项目需求：几个组共用一个入口【父应用】，详细内容【子应用】各组自行维护、打包，这就可以采用：微前端这个技术。

提示：以下是本篇文章正文内容，下面案例可供参考

一、微前端是什么？

其他人说得太多了我就不再赘述。我这里主要讲自己项目运用的微前端：基于single-spa的微前端项目。

主要技术

single-spa：连接主项目与子应用的桥梁
systemjs：浏览器端异步加载模块
single-spa-vue：vue子应用连接主应用的插件

二、使用步骤

1.父应用

1.1 vue-cli搭建vue项目

vue create root-frontend

1.2 改造父应用，使用systemjs加载子应用

index.html的改造：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js" as="script" crossorigin="anonymous" />
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" as="script" crossorigin="anonymous" /> -->
    <script type="systemjs-importmap">
      {
   
        "imports": {
   
          "pro1": "http://localhost:1003/pro1/js/app.js",
          "app1": "http://localhost:1003/app1/js/app.js",
          "single-spa": "http://lib.baomitu.com/single-spa/5.9.0/system/single-spa.min.js",
          "vue": "http://lib.baomitu.com/vue/2.6.12/vue.min.js",
          "vue-router": "http://lib.baomitu.com/vue-router/2.8.1/vue-router.min.js",
          "element-ui": "http://lib.baomitu.com/element-ui/2.13.2/index.js",
          "jquery": "http://lib.baomitu.com/jquery/1.12.4/jquery.min.js",
          "vuex": "http://lib.baomitu.com/vuex/2.5.0/vuex.min.js",
          "axios"

最低0.47元/天解锁文章

qq_42123928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于single-spa的微前端项目

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、微前端是什么？主要技术二、使用步骤1.父应用2.子应用总结前言项目需求：几个组共用一个入口【父应用】，详细内容【子应用】各组自行维护、打包，这就可以采用：微前端这个技术。提示：以下是本篇文章正文内容，下面案例可供参考一、微前端是什么？其他人说得太多了我就不再赘述。我这里主要讲自己项目运用的微前端：基于single-spa的微前端项目。主要技术single-spa：连接主项目与子应用的桥梁systemjs
复制链接

扫一扫

专栏目录