3.基于qiankun的微应用示例（Vue及传统应用混合）一 vue子应用

1. 构建vue 应用

    npm install -g vue-cli 

    vue init webpack

在构建vue应用的有问题可以参考
点这里构建vue应用

2. 进入index.html修改子引用的id 不能与主应用重复

3.修改webpack.dev.config.js允许启动的服务跨域
设置

  devServer: {
    headers: {
        'Access-Control-Allow-Origin':'*'
    },
    其他配置... ...
  }

注意此处是在devServer中新增

 headers: {
        'Access-Control-Allow-Origin':'*'
    }

4. 进入src/main.js
   注意： 这里的修改主要是添加钩子函数，已经vue程序的渲染rander 房子钩子中执行

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

Vue.config.productionTip = false

/* eslint-disable no-new */
function render () {
  new Vue({
    el: '#app1',
    router,
    components: { App },
    template: ''
  })
}

// 挂载钩子
window.vue0 = {}
window.vue0.bootstrap = async function (props) {
  console.log('vue bootstrap');
}
// 生命周期 - 挂载后
window.vue0.mount = async function (props) {
  console.log('vue mount 子应用', props);
  Object.keys(props.fn).forEach(method =>{
    Vue.prototype[`$${method}`] = props.fn[method]
  })
  render()
  // 渲染
}
// 生命周期 - 解除挂载
window.vue0.unmount =  async function (){
  console.log('vue unmount');
}

5. 为了看起来更加的直观修改src/App.vue

至此vue子应用改造完成！！！
允许一下现在可以看到效果了。