Qiankun简单基座搭建

#基础环境（https://blog.csdn.net/qq_39251440/article/details/121096727?spm=1001.2014.3001.5501）
1.nodeJS版本 10.23.0 (vue项目中sass4.0版本号对应)
2.安装包管理工具：npm版本6.14.8/cnpm(npm install -g cnpm --registry=https://registry.npm.taobao.org)/yarn（npm install yarn -g）
3.安装express（安装命令: npm install express -g）
4.安装vue（npm install vue -g）安装脚手架（2.9.6版本的安装：npm install -g vue-cli 3.0.0版本的安装：npm install -g @vue/cli）
5.安装webpack PS:不要忘记webpack4.+开始webpack-cli是必备的哦 版本号一定要对应
npm install --g webpack@4.44.2 webpack-dev-server@3.11.2 webpack-cli@3.3.12

# 主应用步骤说明:
# qiankun-main 注意:只有主应用才需要安装qiankun
1.创建空文件夹 (名称自取: my-quankun),打开vs code 打开文件夹,打开终端
2.终端进入当前文件夹下,创建主应用(基座),以 vue.2x 项目为例 (名称自取: main)
    Vue2.0以上版本初始化项目是用 vue init webpack main  3.0以上 初始化项目是用 vue create main
3.cd main进入main文件夹下,安装qiankun
    npm i qiankun -s
4.注册应用,打开main项目下的main.js
    import { registerMicroApps, setDefaultMountApp, start } from 'qiankun'
    const apps = [
    {
        name: 'vueApp', // 子应用名称
        entry: 'http://localhost:8082', // 子应用地址，开发环境和生产环境值不同，需动态配置
        container: '#container', // 子应用容器
        activeRule: '/vue', //子应用触发规则（路径）
    },
    ];
    // 注册子应用
    registerMicroApps(apps)
    // 启动默认应用
    setDefaultMountApp('/')
    Vue.config.productionTip = false
    // 开启服务
    start({
    prefetch: true // 取消预加载
    })
5.修改App.vue
    <template>
    <div id="app-base">
        <div id="nav">
        <router-link to="/">主应用Home</router-link> |
        <router-link to="/about">主应用About</router-link> |
        <!-- 新增路由点击地址 -->
        <router-link to="/vue">vue微应用</router-link> 
        </div>
        <router-view/>
        <!-- 新增微应用展示容器 -->
        <div id="container"></div>
    </div>
    </template>
6.注意
    public/index.html 文件下id的名称默认为id="app"
    APP.vue  文件下id默认为id="app"
    mian.js 文件下
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
    三个文件id都需要对应起来

# 样式选用element-ui 进入当前项目终端下 安装
    npm i element-ui -s
# main.js引入
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);//引入插件

# 子应用vue-app
1.创建微应用 vue项目2.0 示例名称: vue-app
2.向基座暴露接口，使基座与子应用互通（main.js）要注意id名称
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'

    Vue.config.productionTip = false

    // 文档中将此代码单独放到了一个文件中，此处是直接写在了 main.js 中，两种都可。但是 eslint-disable 需要加上
    if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
    }

    let instance = null;
    function render(props = {}) {
    const { container } = props;
    instance = new Vue({
        router,
        store,
        render: (h) => h(App),
    }).$mount(container ? container.querySelector("#app") : "#app");
    }

    // 独立运行时 直接渲染
    if (!window.__POWERED_BY_QIANKUN__) {
    render();
    }

    export async function bootstrap() {
    console.log("[vue] vue app bootstraped");
    }

    export async function mount(props) {
    console.log("[vue] props from main framework", props);
    render(props);
    }

    export async function unmount() {
    instance.$destroy();
    instance.$el.innerHTML = "";
    instance = null;
    }
3.在根目录创建vue.config.js配置跨域
    const { name } = require("./package");
    module.exports = {
    devServer: {
        port: 8082,//端口号要与主应用注册应用的端口号一致
        // 关闭主机检查，使微应用可以被 fetch
        disableHostCheck: true,
        headers: {
        "Access-Control-Allow-Origin": "*",
        },
    },
    configureWebpack: {
        output: {
        // 微应用的包名，这里与主应用中注册的微应用名称一致
        library: `${name}-[name]`,
        libraryTarget: "umd",  // 将你的 library 暴露为所有的模块定义下都可运行的方式
        jsonpFunction: `webpackJsonp_${name}`,// 按需加载相关，设置为 webpackJsonp_MicroAppOrde 即可
        },
    },
    };