🤖 创建子应用one

1. 创建项目，并yarn安装依赖，参考主应用，这里不赘述。
1. 注意，子应用是不安装qiankun依赖的，子应用只需要暴露对应的生命钩子即可
1. 安装vue-router，以进行子路由测试（可以不安装）

yarn add vue-router

1. 修改src/main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

import routes from "./router";
import './public-path'

Vue.use(VueRouter)

Vue.config.productionTip = false

let router = null
let instance = null

function render() {
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? 'one' : '/',
    mode: 'history',
    routes
  })

  instance = new Vue({
    router,
    render:h=>h(App),
  }).$mount('#app')
}

// 生命周期 - 挂载前
export async function bootstrap(props) {
  console.log('one bootstrap');
}
// 生命周期 - 挂载后
export async function mount() {
  console.log('one mount');
  // 渲染
  render()
}
// 生命周期 - 解除挂载
export async function unmount(){
  console.log('one unmount');
}

// 本地调试
if(!window.__POWERED_BY_QIANKUN__){
  render()
}

1. 新建src/router/index.js

import Home from './../components/Home'
import About from './../components/About'


const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
    },
    {
        path: '/about',
        name: 'about',
        component: About,
    }
]

// 注意 不是导出router对象
export default routes

1. 新建src/components/About.vue

<template>
    <div class="about">
        this is one about
    </div>
</template>

<script>
    export default {
        name: "About"
    }
</script>

<style scoped></style>

1. 新建src/components/Home.vue

<template>
    <div class="home">
        this is one home
    </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped></style>

1. 新建src/public-path.js

if(window.__POWERED_BY_QIANKUN__){
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

1. 新建vue.config.js

const {name} = require('./package')

const port = 6661

module.exports = {
    devServer: {
        port,
        // 允许被主应用跨域fetch请求到
        headers: {
            'Access-Control-Allow-Origin':'*'
        }
    },
    configureWebpack: {
        output: {
            library: `${name}-[name]`,
            // 把子应用打包成umd库格式
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_${name}`
        }
    }
}

1. 修改App.js

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">about</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>