vue如何搞微前端

Vue可以通过以下几种方式实现微前端架构：1、使用qiankun框架、2、基于Single-SPA的实现、3、使用Web Component、4、使用iframe嵌入。下面将详细介绍这几种方式的具体实现方法和适用场景。

一、使用qiankun框架

qiankun是一个基于single-spa的微前端框架，具有易于使用、高性能等优点。主要步骤如下：

安装qiankun
```
npm install qiankun
```

主应用（主项目）配置

在主应用的入口文件中引入qiankun，并注册子应用。

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:7100',
    container: '#container',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:7200',
    container: '#container',
    activeRule: '/app2',
  },
]);
start();

在主应用的HTML中添加一个容器。

<div id="container"></div>

子应用配置

在子应用的入口文件中暴露生命周期函数。

import './public-path';
import Vue from 'vue';
import App from './App.vue';
let instance = null;
function render() {
  instance = new Vue({
    render: h => h(App),
  }).$mount('#app');
}
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
export async function bootstrap() {
  console.log('vue app bootstraped');
}
export async function mount(props) {
  console.log('props from main framework', props);
  render();
}
export async function unmount() {
  instance.$destroy();
  instance = null;
}

配置子应用的public-path

在子应用的入口文件中引入public-path.js。

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

二、基于Single-SPA的实现

Single-SPA是一个微前端框架，可以将多个单页面应用整合到一起。主要步骤如下：

安装single-spa
```
npm install single-spa
```

主应用配置

在主应用的入口文件中注册子应用。

import { registerApplication, start } from 'single-spa';
registerApplication({
  name: 'app1',
  app: () => System.import('app1'),
  activeWhen: '/app1',
});
registerApplication({
  name: 'app2',
  app: () => System.import('app2'),
  activeWhen: '/app2',
});
start();

子应用配置

在子应用的入口文件中暴露生命周期函数。

import Vue from 'vue';
import App from './App.vue';
let instance = null;
export async function bootstrap() {
  console.log('vue app bootstraped');
}
export async function mount(props) {
  instance = new Vue({
    render: h => h(App),
  }).$mount('#app');
}
export async function unmount() {
  instance.$destroy();
  instance = null;
}

三、使用Web Component

通过将子应用打包成Web Component，可以轻松地嵌入到主应用中。主要步骤如下：

创建Web Component
- 使用Vue CLI创建一个新的Vue项目。
- 在项目中安装vue-custom-element。
```
npm install vue-custom-element --save
```

配置Web Component

在main.js中注册Web Component。

import Vue from 'vue';
import App from './App.vue';
import vueCustomElement from 'vue-custom-element';
Vue.use(vueCustomElement);
Vue.customElement('my-vue-element', App);

在主应用中使用Web Component
- 将打包后的Web Component文件引入到主应用的HTML中。
```
<script src="path/to/my-vue-element.js"></script>
<my-vue-element></my-vue-element>
```

四、使用iframe嵌入

这种方式最为简单和直接，将子应用嵌入到主应用中作为iframe。主要步骤如下：

配置子应用
- 子应用无需做特殊配置，只需确保能够独立运行。

在主应用中嵌入iframe

在主应用的HTML中添加iframe标签。

<iframe src="http://localhost:7100" width="100%" height="100%"></iframe>

总结

通过以上几种方式，可以有效地将Vue应用拆分为多个子应用，实现微前端架构。具体选择哪种方式，需要根据项目的具体需求和技术栈进行评估：

qiankun框架：适用于需要强大功能和灵活性的项目，推荐使用。
Single-SPA：适用于希望使用标准化微前端框架的项目。
Web Component：适用于需要跨框架或跨技术栈集成的项目。
iframe嵌入：适用于简单场景，但性能和用户体验相对较差。

建议根据项目具体情况，选择适合的微前端方案，并进行详细的评估和测试，以确保最终效果符合预期。

vue如何搞微前端

一、使用qiankun框架

二、基于Single-SPA的实现

三、使用Web Component

四、使用iframe嵌入

总结

相关问答FAQs：

发表回复