VUE3 用法

在 app 入口文件引用 MiniAppplugin 模块

import { createApp } from 'vue'
import { MiniAppplugin } from '@xyqg/miniapp/dist/vue3'
import App from './App.vue'

createApp(App).use(MiniAppplugin).mount('#app')

在主站使用

首先要正常新增一个路由页面，然后在页面内使用微前端组件

<template>
  <div style="padding: 30px;">
    <MiniAppComponentVue3
      :pageUrl="'http://localhost:8888/'"
      :props="{
        auth: '1',
      }"
    ></MiniAppComponentVue3>
  </div>
</template>
<script setup lang="ts">
import { MiniAppComponentVue3 } from "@yqg/miniappcomponent/vue3";
</script>
<style lang="less" scoped></style>

VUE2 用法

在 app 入口文件引用 init 模块

import Vue from "vue";
import "@yqg/miniappcomponent/init" // 在这里引用，一定要在 Vue.use 之前
Vue.use(route)

在主站使用

首先要正常新增一个路由页面，然后在页面内使用微前端组件

<template>
  <div style="padding: 30px;">
    <MiniAppComponentVue3
      :pageUrl="'http://localhost:8888/'"
      :props="{
        auth: '1',
      }"
    ></MiniAppComponentVue3>
  </div>
</template>
<script setup lang="ts">
import { MiniAppComponentVue3 } from "@xyqg/miniapp/dist/vue3";
</script>
<style lang="less" scoped></style>

主应用变量注入

 <MiniAppComponentVue3
    :pageUrl="'http://localhost:8888/'"
    :props="{
      auth: '1',
    }"
  >
  </MiniAppComponentVue3>

子应用变量获取

console.log(window.$wujie.props.auth)