七个步骤教你快速入门搭建一个 micro-app微前端简单上手

vue2+vue2子应用

基座应用代码

1、安装依赖

npm i @micro-zoe/micro-app --save

2、在入口引入

//main.js
import microApp from '@micro-zoe/micro-app'

//这个代码放在new Vue() 下面
microApp.start()

3、分配一个路由给子应用

就是访问这个路由菜单的时候加载子应用

（1）、在已有的后台添加一个路由给子应用

---

(2)、小demo的写死路由的方式

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import home from '../view/home/index.vue'

const routes = [
    {
        path: '/',
        name:'home',
        component:home,
        children:[
            {
                path: '/child1*',
                name:'sex',
                component:() => import(/* webpackChunkName: "nextjs11" */ '../view/sex/index.vue'),
            },
            {
                path: '/child2*',
                name:'user',
                component: () => import(/* webpackChunkName: "nextjs11" */ '../view/user/index.vue'),
            },
            {
                path: '/child3*',
                name:'user',
                component: () => import(/* webpackChunkName: "nextjs11" */ '../view/oa/index.vue'),
            }
        ]
    },
    
]

export const router = new VueRouter({
    mode: 'history',
    routes
})

菜单的component代码的方式在页面中嵌入子应用

作为子应用

1、设置跨域支持

在vue.config.js中添加配置

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

2、设置基础路由

//我是在router的index.js ,也就是在存放 new Router 这里，
const router = new Router({
  scrollBehavior: () => ({ y: 0 }),
  base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,  //添加这行代码就可以了
  routes: constRouter
})

3、设置 publicPath

我这不是webpack的项目，我跳过这个步骤

下面这两个是如何使用

//新建一个 public-path.js
if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
    __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}

在main最顶部导入，也就是子应用入口文件的第一行代码是这个

import './utils/public-path'
import Vue from 'vue'

4、监听卸载

子应用被卸载时会接受到一个名为unmount的事件，在此可以进行卸载相关操作

const app = new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

// 监听卸载操作，这个代码 也是放在new Vue()之后哦
window.addEventListener('unmount', function() {
  app.$destroy()
})