精华内容
下载资源
问答
  • QianKun框架初使用!

    2021-07-14 11:17:47
    配上qiankun的官方链接一份 https://qiankun.umijs.org/zh/guide/tutorial#%E4%B8%BB%E5%BA%94%E7%94%A8 一、相关准备 主应用:React、QianKun、react-router-dom、react-router 微应用:React、react-router-dom、...

    此文只是自己写的小demo,可实现微服务,才敢拿出来和大家分享,后面会把github链接或者码云的链接贴出来。
    配上qiankun的官方链接一份
    https://qiankun.umijs.org/zh/guide/tutorial#%E4%B8%BB%E5%BA%94%E7%94%A8

    一、相关准备
    主应用:React、QianKun、react-router-dom、react-router
    微应用:React、react-router-dom、react-router、@rescripts/cli
    建造目录:parentReact为主应用,childReact为微应用

    这里就拿两个应用来展示

    二、开始操作
    简单的npm install就不在这里说了哈,各位亲们。
    在这里插入图片描述

    1、parentReact操作,src/index.js中引入乾坤,
    import { registerMicroApps, start } from ‘qiankun’;
    registerMicroApps([
    {
    name: ‘parentReact’,
    entry: ‘//localhost:3000’, // 主应用运行的端口号
    container: ‘#container’,
    activeRule: ‘/parent-react’,
    },
    {
    name: ‘childReact’,
    entry: ‘//localhost:3001’, // 微应用运行的端口号
    container: ‘#container’,
    activeRule: ‘/child-react’,
    }
    ]); // 这里注册主应用和微应用
    这里的start建议放在index.js文件的最后执行,以免出现container没有加载的情况
    start(); // 启动 qiankun

    2、操作parentReact的路由模式,手动设置为BrowserRouter,并且配置一个两个自定义路由(随便什么都可以,Route的component里面返回一个h1标签即可)

    3、切换到微应用中childParent中,首先在src文件夹下新建文件public-path.js,并在index.js中的最顶部引入这个文件(这一步是要修改webpack配置中的publicPath)
    if (window.POWERED_BY_QIANKUN) {
    window.webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN;
    }(这里我给代码块中加了一个全局的window,避免了eslint检测的not defined)

    4、在src/index.js文件中导出qiankun在主应用中要使用的生命周期(简洁意赅就是导出生命周期)
    在这里插入图片描述
    5、安装插件 @rescripts/cli npm i -D @rescripts/cli
    根目录新增 .rescriptsrc.js
    在这里插入图片描述const { name } = require(’./package’);

    module.exports = {
    webpack: (config) => {
    config.output.library = ${name}-[name]; //这里的属性值建议使用主应用中注册微应用时定义的name,避免发生错误
    config.output.libraryTarget = ‘umd’;
    config.output.jsonpFunction = webpackJsonp_${name};
    config.output.globalObject = ‘window’;

    return config;
    

    },

    devServer: (_) => {
    const config = _;

    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };
    config.historyApiFallback = true;
    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;
    
    return config;
    

    },
    };

    6、修改微应用中的package.json文件在这里插入图片描述
    7、修改微应用的路由模式,并添加路由。
    <BrowserRouter basename={"/child-react"}> // basename切记设置,和注册微应用时保持一致。

    到这里基本设置就结束了。如果启动项目后报错,请参考 https://qiankun.umijs.org/zh/faq qiankun常见问题一栏。

    谢谢大家的阅读。祝大家写代码没有BUG,不被需求所难倒。
    后期我会把代码地址贴到评论区,有问题大家及时指出哦。

    展开全文
  • vue3+qiankun框架初体验

    2021-08-04 14:24:29
    qiankun官网 首先我们需要了解什么是微前端,他是做什么的。 1.什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。简单来说就是就是可以把多个不同框架的...

    项目框架基座和子项目都为vue3

    qiankun官网

    首先我们需要了解什么是微前端,他是做什么的。

    1.什么是微前端
    微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。简单来说就是就是可以把多个不同框架的项目部署在不同环境,但又可以在一个项目中访问。
    2.他是做什么的
    他可以将不同框架的多个项目组成统一项目,而组成项目的子项目又可以单独部署单独访问。可以说他们的关系是互相关联而又互不关联。

    说明:由于项目还并没有进行上线测试,此代码还不能保证上线没有问题,如有问题请与我交流沟通。
    主项目代码实现
    1.首先我们需要建立.env.development,.env.production,.ent.qa。3个文件,这3个文件的作用是为了配置前端打包项目路径配置,方便上线,测试,开发环境的区分(注意:文件内配置必须为VUE_APP_开头,否则后面用到的时候不能进行解析)
    env.development

    NODE_ENV = 'development'
    // 开发主项目
    VUE_APP_BASE_URL = 'http://localhost:8080'
    // 开发子项目
    VUE_APP_APP_URL = 'http://localhost:8081'
    VUE_APP_SERVICEMESH_URL = 'http://localhost:8082'
    VUE_APP_RESOURCE_URL = 'http://localhost:8083'
    VUE_APP_MONITOR_URL = 'http://localhost:8084'
    VUE_APP_SYSTEM_URL = 'http://localhost:8085'
    

    env.production

    NODE_ENV = 'production'
    // 生产主项目
    VUE_APP_BASE_URL = 'http://localhost:8080'
    // 生产子项目
    VUE_APP_APP_URL = 'http://localhost:8081'
    VUE_APP_SERVICEMESH_URL = 'http://localhost:8082'
    VUE_APP_RESOURCE_URL = 'http://localhost:8083'
    VUE_APP_MONITOR_URL = 'http://localhost:8084'
    VUE_APP_SYSTEM_URL = 'http://localhost:8085'
    

    env.qa

    NODE_ENV = 'qa'
    // 测试主项目
    VUE_APP_BASE_URL = 'http://localhost:8080'
    // 测试子项目
    VUE_APP_APP_URL = 'http://localhost:8081'
    VUE_APP_SERVICEMESH_URL = 'http://localhost:8082'
    VUE_APP_RESOURCE_URL = 'http://localhost:8083'
    VUE_APP_MONITOR_URL = 'http://localhost:8084'
    VUE_APP_SYSTEM_URL = 'http://localhost:8085'
    

    package.json增加

    "scripts": {
        "serve": "vue-cli-service serve ",
        "build": "vue-cli-service build ",
        "lint": "vue-cli-service lint",
        "serve-qa": "vue-cli-service serve --mode qa",
        "serve-product": "vue-cli-service serve --mode production",
        "build-qa": "vue-cli-service build --mode qa",
        "build-product": "vue-cli-service build --mode production"
      },
    

    主项目router.js

    import {
        createRouter,
        createWebHashHistory
    } from 'vue-router';
    import store from '../store/store';
    // 采用路由懒加载方式
    const login = () => import('../components/static/Login.vue');
    const Home = () => import('../components/static/Home.vue');
    const router = createRouter({
        history: createWebHashHistory(),
        routes: [{
            path: '/',
            redirect: login,
            name: '登录'
        }, {
            path: '/login',
            component: login,
            name: '登录'
        }, {
            path: '/home',
            name: 'Home',
            component: Home
        }]
    });
    export default router;
    

    主项目src下创建micro文件夹,
    micro/apps.js 用来配置子项目路由

    // /src/micfo/apps.js
    //process.env为上边配置的路径第值
    console.log(process.env);
    const apps = [{
        name: 'kem-app-name',
        entry: process.env.VUE_APP_APP_URL,
        container: '#KEMAPP',//承载子项目的div的id值必须与此对应
        activeRule: '#/kem-app',//激活子项目的路由
        sandbox: {
            strictStyleIsolation: true // 开启样式隔离
        }
    }];
    
    export default apps;
    

    mico/index.js

    // src/mico/index.js
    import {
        registerMicroApps,
        addGlobalUncaughtErrorHandler,
        start,
        initGlobalState
    } from 'qiankun';
    
    import apps from './apps';
    
    registerMicroApps(apps, {
        beforeLoad: [
            app => {
                console.log("before load", app.name);
                return Promise.resolve();
            },
        ],
        beforeMount: [
            app => {
                console.log("before mount", app.name);
                return Promise.resolve();
            },
        ],
        afterUnmount: [
            app => {
                console.log("after mount", app.name);
                return Promise.resolve();
            },
        ],
    }, );
    const state = {};
    //主项目与子项目交互用的参数,子项目与主项目都可以修改此参数
    const actions = initGlobalState(state);
    actions.setGlobalState({
        globalToken: ''
    })
    addGlobalUncaughtErrorHandler((event) => {
        console.log(event);
        const {
            msg
        } = event;
        if (msg && msg.includes('died in status LOADING_SOURCE_CODE')) {
            console.log('微应用加载失败,请检查应用是否可运行');
        }
    });
    
    export default start;
    export {
        actions
    }
    

    主项目的App.vue

    <template>
      <div>
        <a-layout v-if="token" style="min-height: 100vh">
          <a-layout-header>
            <div class="titleBox">
              123
            </div>
          </a-layout-header>
          <a-layout>
            <a-layout-sider v-model:collapsed="collapsed" collapsible>
              <a-menu
                v-model:selectedKeys="selectedKeys"
                theme="dark"
                mode="inline"
                :open-keys="openKeys"
                @openChange="onOpenChange"
              >
                <a-menu-item key="dashboard">
                  <HeartOutlined />
                  <span>dashboard</span>
                </a-menu-item>
                <a-sub-menu v-for="item in menu" :key="item.key">
                  <template #title>
                    <span>
                      <ReconciliationOutlined
                        v-else-if="item.title == 'dashboard'"
                      />
                      <HeartOutlined v-else />
                      <span>{{ item.title }}</span>
                    </span>
                  </template>
                  <a-menu-item
                    v-for="itemchildren in item.children"
                    :key="itemchildren.title"
                  >
                    <router-link :to="itemchildren.url">{{
                      itemchildren.title
                    }}</router-link>
                  </a-menu-item>
                </a-sub-menu>
              </a-menu>
            </a-layout-sider>
            <a-layout-content>
              <router-view />
              // 此项的值与micfo/apps.js中apps中container的值对应
              <div id="KEMAPP"></div>
            </a-layout-content>
          </a-layout>
        </a-layout>
        <router-view />
      </div>
    </template>
    
    <script>
    import { useStore } from 'vuex';
    import {
      AppstoreOutlined,
      DatabaseOutlined,
      FileSearchOutlined,
      ToolOutlined,
      SettingOutlined,
      ReconciliationOutlined,
      HeartOutlined
    } from '@ant-design/icons-vue';
    import {
      defineComponent,
      ref,
      computed,
      // onMounted,
      toRefs,
      reactive
    } from 'vue';
    // import { useRouter } from "vue-router";
    import { logout } from '@/commons/common';
    export default defineComponent({
      name: 'App',
      components: {
        AppstoreOutlined,
        DatabaseOutlined,
        FileSearchOutlined,
        ToolOutlined,
        SettingOutlined,
        ReconciliationOutlined,
        HeartOutlined
      },
      setup() {
        const store = useStore();
        // 在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener('beforeunload', () => {
          sessionStorage.setItem('store', JSON.stringify(store.state));
        });
        // const router = useRouter();
        const state = reactive({
          openKeys: ['']
        });
        const menu = ref([
          {
            title: '系统',
            key: 'app',
            children: [
              { title: '应用', url: '/kem-app/about' }
            ]
          }
        ]);
        const onOpenChange = openKeys => {
          console.log(openKeys);
          const latestOpenKey = openKeys.find(
            key => state.openKeys.indexOf(key) === -1
          );
          if (openKeys.length == 0) {
            state.openKeys = openKeys;
          } else {
            state.openKeys = latestOpenKey ? [latestOpenKey] : [];
          }
        };
        return {
          collapsed: ref(true),
          selectedKeys: ref([]),
          menu,
          token: computed(() => store.state.token),
          logout,
          ...toRefs(state),
          onOpenChange
        };
      }
    });
    </script>
    
    

    子项目

    子项目 vue.config.js

    const path = require('path');
    const packageName = require('./package.json').name;
    console.log(packageName);
    
    function resolve(dir) {
        return path.join(__dirname, dir);
    }
    const port = 8081; // dev port
    const dev = process.env.NODE_ENV === 'development'
    
    module.exports = {
        /**
         * You will need to set publicPath if you plan to deploy your site under a sub path,
         * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
         * then publicPath should be set to "/bar/".
         * In most cases please use '/' !!!
         * Detail: https://cli.vuejs.org/config/#publicpath
         */
        publicPath: dev ? `//localhost:${port}` : '/',
        outputDir: 'dist',
        chainWebpack: config => {
            // 删除 浏览器在⻚⾯加载完成后,利⽤空闲时间提前获取⽤户未来可能会访问的内容。
            config.plugins.delete('prefetch');
            // 压缩代码
            config.optimization.minimize(true);
            config.module.rule('images')
                .use('url-loader')
                .loader('url-loader')
                .options({
                    limit: 4096, // ⼩于4kb将会被打包成 base64
                    fallback: {
                        loader: 'file-loader',
                        options: {
                            name: './img/[name].[hash:8].[ext]',
                            publicPath: dev ? `//localhost:${port}` : '/'
                        }
                    }
                })
            config.module
                .rule('md')
                .test(/\.md/)
                .use('text-loader')
                .loader('text-loader')
                .end()
        },
        assetsDir: 'static',
        filenameHashing: true,
        // tweak internal webpack configuration.
        // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
        devServer: {
            // host: '0.0.0.0',
            hot: true,
            disableHostCheck: true,
            port,
            overlay: {
                warnings: false,
                errors: true,
            },
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
        },
        // 自定义webpack配置 packageName的值为package.json中name值
        configureWebpack: {
            resolve: {
                alias: {
                    '@': resolve('src'),
                },
            },
            output: {
            // 该值需要与主项目中micfo/apps.js apps中的name值相对应
                library: `${packageName}-name`,
                libraryTarget: 'umd',
                jsonpFunction: `webpackJsonp_${packageName}`,
            },
        },
    };
    

    子项目src路径下创建2个文件夹shares和micro
    shares/action.js

    // 主应用与子应用字段交互方法
    function emptyAction() {
        // 警告:提示当前使用的是空 Action
        console.warn("Current execute action is empty!");
    }
    
    class Actions {
        // 默认值为空 Action
        actions = {
            onGlobalStateChange: emptyAction,
            setGlobalState: emptyAction
        };
    
        /**
         * 设置 actions
         */
        setActions(actions) {
            this.actions = actions;
        }
    
        /**
         * 映射
         */
        onGlobalStateChange(...args) {
            return this.actions.onGlobalStateChange(...args);
        }
    
        /**
         * 映射
         */
        setGlobalState(...args) {
            return this.actions.setGlobalState(...args);
        }
    }
    
    const actions = new Actions();
    export default actions;
    

    micro/public-path.js

    //  /src/micro/public-path.js
    if (window.__POWERED_BY_QIANKUN__) {
        // eslint-disable-next-line no-undef
        __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
    }
    

    完毕

    展开全文
  • qiankun(乾坤) In Chinese, qian(乾) means heaven and kun(坤) earth. qiankun is the universe. Qiankun enables you and your teams to build next-generation and enterprise-ready web applications ...
  • 基于qiankun框架的微前端实战使用

    千次阅读 热门讨论 2020-08-24 14:56:45
    qiankun框架实操 这里我们打算建立三个项目进行实操,一个Vue项目充当主应用,另一个Vue和React应用充当子应用,话不多说,直接开干。 首先我们安装qiankun yarn add qiankun 或者 npm i qiankun -S 安装完qiankun...

       最近公司要整合目前所有的前端项目,希望放到同一个项目里面进行管理,但是项目使用的技术栈大体不相同,有原生js的,有用jq的也有用Vue的,整合的话要么重构,统一技术栈,不过这是不现实的,成本高,时间长,要么使用iframe,但是iframe也有很多缺点,通信不方便,刷新页面会导致路由丢失,这都是很不好的体验,于是我想起了最近很火的微前端概念,打算用微前端的技术来整合已有项目。

    1. 什么是微前端?

      微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆完后在!
       
    2. 为什么使用微前端?

      ① 不同团队间开发同一个应用技术栈不同
      ② 希望每个团队都可以独立开发,独立部署
      ③ 项目中还需要老的应用代码

      我们可以将一个应用划分成若干个子应用,将子应用打包成一个个的lib。当路径切换 时加载不同的子应用。这样每个子应用都是独立的,技术栈也不用做限制了!从而解决了前端协同开发问题。
       
    3. 如何落地微前端?
       
      2018 Single-SPA诞生了, single-spa 是一个用于前端微服务化的 JavaScript 前端解决方案 (本身没有处理样式隔离, js 执行隔离) 实现了路由劫持和应用加载。
       
      2019qiankun 基于Single-SPA, 提供了更加开箱即用的 API single-spa + sandbox + import-html-entry ) 做到了,技术栈无关、并且接入简单(像i frame 一样简单)。

       
    4. qiankun框架实操

      这里我们打算建立三个项目进行实操,一个Vue项目充当主应用,另一个Vue和React应用充当子应用,话不多说,直接开干。
      首先我们安装qiankun
      yarn add qiankun 或者 npm i qiankun -S

      安装完qiankun后我们在创建主应用,也是我们的基座

      vue create qiankun-base
      

      接着创建vue子应用

      vue create qiankun-vue
      

    接着创建react子应用

    cnpm install -g create-react-app
    create-react-app my-app

    创建好后的目录如下,qiankun-js忽略                           

     

     

    项目创建好后我们首先进行主应用qiankun-base的配置,进入man.js文件进行配置, 在main.js中加入以下代码,要注意的是,entry这项配置是我们两个子项目的域名和端口,我们必须确保两字子项目运行在这两个端口上面,container就是我们的容器名,就是我们子应用挂载的节点,相当于Vue项目里面的app节点,activeRule就是我们的激活路径,根据路径来显示不同的子应用。

    import { registerMicroApps, start } from 'qiankun';
    registerMicroApps([
      {
        name: 'vueApp', // 应用的名字
        entry: '//localhost:8021',// 默认会加载这个html 解析里面的js 动态的执行 (子应用必须支持跨域)fetch
        container: '#vue', // 容器名
        activeRule: '/vue',// 激活的路径
      },
      {
        name: 'reactApp',
        entry: '//localhost:8020',
        container: '#react',
        activeRule: '/react',
      },
    ]);
    start();

    配置完之后我们去到qiankun-base的app.vue文件进行主应用的页面编写,这里我安装了element-ui来进行页面美化,大家可以安装一下,

    npm i element-ui -S

    修改app.vue的组件代码如下
     

    <template>
      <div>
      <el-menu :router="true" mode="horizontal">
          <!--基座中可以放自己的路由-->
          <el-menu-item index="/">Home</el-menu-item> 
           <!--引用其他子应用-->
          <el-menu-item index="/vue">vue应用</el-menu-item>
          <el-menu-item index="/react">react应用</el-menu-item>
      </el-menu>
        <router-view ></router-view>
        <div id="vue"></div>
        <div id="react"></div>
      </div>
    </template>

    大家可以看到,在elementui的路由导航模式下,菜单子元素的index就是要跳转的路径,这个路径和我们刚刚在main.js编写activeRule是一致,子应用的切换就是根据这里的index进行监听。

    接下来我们进行router的配置

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
      const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
    
    const router = new VueRouter({
    	mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

    我们运行一下qiankun-base

    npm run serve

    界面应该是这样子的

    目前页面除了菜单是没有其他东西的,点击也是没有效果的,因为我们还没配置子应用,现在我们来配置子应用
    打开qiankun-vue目录, 在子Vue应用的main.js中加入以下代码

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    let instance = null; 
    
    //挂载实例
    function render(){ 
        instance = new Vue({ router, render: h => h(App) }).$mount('#app') 
    }
    //判断当前运行环境是独立运行的还是在父应用里面进行运行,配置全局的公共资源路径
    if(window.__POWERED_BY_QIANKUN__){ 
        __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 
    }
    //如果是独立运行window.__POWERED_BY_QIANKUN__=undefined
    if(!window.__POWERED_BY_QIANKUN__){
        render()
    } 
    //最后暴露的三个方法是固定的,加载渲染以及销毁
    export async function bootstrap(){} 
    export async function mount(props){
        render();
    } 
    export async function unmount(){
        instance.$destroy();
    }

    配置完main.js后我们继续配置基础配置模块,我们在子Vue应用的根目录下面新建一个Vue.config.js文件

    module.exports = {
        devServer:{
            port:10000,//这里的端口是必须和父应用配置的子应用端口一致
            headers:{
                //因为qiankun内部请求都是fetch来请求资源,所以子应用必须允许跨域
                'Access-Control-Allow-Origin':'*' 
            }
        },
        configureWebpack:{
            output:{
                //资源打包路径
                library:'vueApp',
                libraryTarget:'umd'
            }
        }
    }

    接下里再进行router的配置

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
      const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: '/vue',
      routes
    })
    
    export default router

    这三步就已经把子应用配置好了,接下来我们再进行子React应用的配置。

    重写子React的src目录下的index.js文件,如下

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    function render(){
      ReactDOM.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>,
        document.getElementById('root')
      );
    }
    if(!window.__POWERED_BY_QIANKUN__){
      render();
    }
    export async function bootstrap(){
    
    }
    export async function mount() {
      render()
    }
    export async function unmount(){
      ReactDOM.unmountComponentAtNode( document.getElementById('root'));
    }

    再进行dev以及打包的配置,根目录下面的config-overrides.js

    module.exports = {
        webpack:(config)=>{
            config.output.library = 'reactApp';
            config.output.libraryTarget = 'umd';
            config.output.publicPath = 'http://localhost:20000/';
            return config;
        },
        devServer:(configFunction)=>{
            return function (proxy,allowedHost){
                const config = configFunction(proxy,allowedHost);
                config.headers = {
                    "Access-Control-Allow-Origin":'*'
                }
                return config
            }
        }
    }

    子React的基础配置和子Vue基本相同,在这里我们就算是配置完了,接下来我们看看结果如何,启动主应用以及两个子应用

    上面是我录制的一个gif,可以看到我们的微前端实践已经成功了,点击相应的菜单可以跳转到对应的子应用,并且子应用内的路由是不会受影响的。还有一个需要注意的是,我们的应用路由模式要用history模式,没有的要去router文件里面定义

    const router = new VueRouter({ 
        mode: 'history', 
        base: '/vue', 
        routes 
    })

    那么今天的微前端的分享就到这里了,我可能讲得不太好,希望对大家有用,更加详细的教程和相关问题解答可以上官网

    https://qiankun.umijs.org/zh

    最后附上例子的源码地址,https://github.com/DJYang666/qiankun.git,喜欢的多多关注哦

    展开全文
  • 当主应用使用hash路由时, 子应用尽量也使用hash路由, 避免一些问题 主应用的main.js中配置apps时, activeRule的路径, 需要和子应用中的router.js中对应 主应用和子应用不能有相同的id名字, vue-cli项目初创建时, 主...
    1. 当主应用使用hash路由时, 子应用尽量也使用hash路由, 避免一些问题
    2. 主应用的main.js中配置apps时, activeRule的路径, 需要和子应用中的router.js中对应
    3. 主应用和子应用不能有相同的id名字, vue-cli项目初创建时, 主应用和子应用的App.vue中父div的id都是app, 需要修改
    展开全文
  • 前言 qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家更简单、无痛的构建一个生产可用微前端架构系统。关于什么是“微前端”,这里就不作过多介绍了,这里默认大家已经具有相关的预备知识。 对于...
  • qiankun简单demo.rar

    2021-07-01 10:23:08
    vue-cli使用qiankun框架demo
  • 微前端框架qiankun

    2021-03-02 09:09:28
    微前端框架qiankun 优秀文档:https://juejin.cn/post/6885211340999229454 一、介绍 qiankun 是基于 single-spa 做了二次封装的微前端框架,通过解决了 single-spa 的一些弊端和不足,来帮助大家实现更简单、无...
  • 本文将针对微前端框架 qiankun 的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是 微前端。 微前端 是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变...
  • 微应用: 暂不支持vite2.x 版本,因为vite打包代码时,内部的esbuild会tree shake掉与qiankun相关的生命周期钩子 二.主应用配置 三.微应用配置 注册 vue.config.js const path = require("path"); const ...
  • 万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇 本系列其他文章计划一到两个月内完成,点个 关注 不迷路。 计划如下: 生命周期篇; IE 兼容篇; 性能优化、缓存方案篇; 概述 本文将针对微...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 565
精华内容 226
关键字:

qiankun框架