使用 Vue 框架

本教程主要说明 Vue 应用如何接入 Lyra 平台。

注意

仅支持 Vue 2.7+ 和 3.0 版本。

应用集成

这里以 Vue cli >= 5.0 版本作为介绍。

提示

CLI 5.0 集成的是 webpack 5，与之前的 API 稍有出入

修改 vue.config.js 文件：

vue.config.js

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  configureWebpack: {
    output: {
      library: '<your library name>',
      libraryTarget: 'umd',
      uniqueName: 'webpackJsonp_mediinfo_<your library name>',
    },
  },
  devServer: {
    allowedHosts: 'all',
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': '*',
      'Access-Control-Allow-Headers': '*',
    },
  },
});

main.js

import './public-path.js'
import { appCreator, unmountApp } from './app.js'

// Note: 即使你没有什么要处理的，此函数也不能省略
export async function bootstrap() {
  // do something...
}

export async function mount({ container }) {
  const { mount } = appCreator();

  mount(container.querySelector('#app')!);
}

export async function unmount({ container }) {
  unmountApp(container)
}

public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  // 修改变量，以修复构建资源加载问题
  // https://qiankun.umijs.org/zh/faq#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%BE%AE%E5%BA%94%E7%94%A8%E5%8A%A0%E8%BD%BD%E7%9A%84%E8%B5%84%E6%BA%90%E4%BC%9A-404
  const resource = new URL(
    process.env.BASE_URL,
    window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__,
  );

  __webpack_public_path__ = resource.toString();
}

然后，根据自己的版本选择：

Vue 3.0

import mdly from 'mdly'

// 将之前应用的逻辑移入一个函数内
export function appCreator() {
  const router = createRouter({
    history: createWebHashHistory(),
    routes,
  });

  mdly.onAppShow(() => {
    router.options.history.listening = true
  })

  mdly.onAppHide(() => {
    router.options.history.listening = false  // 防止与其他应用冲突
  })

  const app = createApp(App);

  app.use(router);

  return app;
}

export function unmountApp(container) {
   const elem = container.querySelector('#app');
  const app = elem ? elem.__vue_app__ : null;

  if (app) app.unmount();
}

Vue 2.7+

import mdly from 'mdly'

// 将之前应用的逻辑移入一个函数内
export function appCreator() {
  const router = createRouter()

  const mount = (elem) => {
    const app = new Vue({
      router,
      render: h => h(App),
    });
    
    app.$mount(elem)
  }

  return { mount };
}

export function unmountApp(container: HTMLDivElement) {
  // 查询容器下的挂载节点
  const mountElement = container.querySelector('#app');

  // 被 vue 挂载的节点会出现 __vue__ 属性
  // 但有一种情况会没哟，那就是挂载的时候报错，没有挂载成功
  const app = mountElement ? mountElement['__vue__'] : null;
  if (app) {
    app.$destroy();
    app.$el.innerHTML = '';
  }
}

function createRouter() {
 const router = new VueRouter({
    mode: 'hash',
    routes,
  });

  mdly.onAppShow(() => {
    router.history.setupListeners()
  })

  mdly.onAppHide(() => {
    router.history.teardown() // 防止与其他应用冲突
  })

  return router;
}

最后，你就接入到平台中看看效果。

组合式 API

我们内置了一些简单的 API，减少一些封装操作。

<script setup>
import { onAppShow, onAppHide } from 'mdly/vue'

onAppShow(() => {
  console.log('应用显示了')
})

onAppHide(() => {
  console.log('应用隐藏了')
})
</script>

以下为支持的 API 列表：

• onAppShow
• onAppHide
• onTabClose
• onTabRefresh

内置组件

敬请期待