构建高效qiankun微前端应用的步骤及技巧

前端

2024-01-30 21:42:42

从零开始构建qiankun微前端项目：

1. 前期准备：

确保已安装Node.js和npm。
创建一个新的项目文件夹，例如“my-qiankun-project”。
在项目文件夹中，运行“npm init -y”初始化一个新的npm项目。

2. 安装qiankun：

在项目文件夹中，运行“npm install qiankun --save”。

3. 创建主应用：

在项目文件夹中，创建一个名为“main”的文件夹，作为主应用。
在“main”文件夹中，创建一个名为“index.html”的文件，作为主应用的入口HTML文件。
在“index.html”文件中，添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <script src="main.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

在“main”文件夹中，创建一个名为“main.js”的文件，作为主应用的入口JavaScript文件。
在“main.js”文件中，添加以下代码：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');

4. 创建子应用：

在项目文件夹中，创建一个名为“sub-app”的文件夹，作为子应用。
在“sub-app”文件夹中，创建一个名为“index.html”的文件，作为子应用的入口HTML文件。
在“index.html”文件中，添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <script src="sub-app.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

在“sub-app”文件夹中，创建一个名为“sub-app.js”的文件，作为子应用的入口JavaScript文件。
在“sub-app.js”文件中，添加以下代码：

import { createApp } from 'vue';
import SubApp from './SubApp.vue';

const app = createApp(SubApp);

app.mount('#app');

5. 配置qiankun：

在项目文件夹中，创建一个名为“qiankun.config.js”的文件，作为qiankun的配置文件。
在“qiankun.config.js”文件中，添加以下代码：

module.exports = {
  apps: [
    {
      name: 'sub-app',
      entry: '//localhost:3000',
      activeRule: '/sub-app',
    },
  ],
  master: {
    routes: [
      {
        path: '/sub-app',
        microApp: 'sub-app',
      },
    ],
  },
};