从零开始搭建qiankun微前端demo
2023-11-01 02:28:47
微前端的出现源于我对公司前端架构的思考，由于我们大多数页面都是手机h5，分散且基本毫无关联，每次新页面都开一个二级域名，这就导致了页面很难管理。因此，我开始研究微前端架构，虽然很久以前就听过，但拖延症让我直到有需要才去自己学习。本文将初探qiankun，从零搭建一个微前端demo。
qiankun是什么？
qiankun是一个用于构建微前端应用程序的库，它提供了开箱即用的功能，例如：
- 模块注册和加载
- 路由管理
- 状态管理
- 通信机制
qiankun可以与任何前端框架一起使用，例如：React、Vue和Angular。
搭建qiankun微前端demo
下面我们来搭建一个qiankun微前端demo。
- 创建主应用
首先，我们需要创建一个主应用，它将作为微前端应用程序的入口。
mkdir my-qiankun-app
cd my-qiankun-app
在my-qiankun-app目录下，使用npm初始化一个新的项目：
npm init -y
然后，安装qiankun：
npm install qiankun
在src目录下，创建一个App.js文件，这是主应用的入口文件：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
在public目录下，创建一个index.html文件，这是主应用的HTML入口文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="/src/main.js"></script>
</body>
</html>
- 创建微前端应用程序
接下来，我们需要创建一个微前端应用程序。
mkdir micro-app
cd micro-app
在micro-app目录下，使用npm初始化一个新的项目：
npm init -y
然后，安装qiankun和vue：
npm install qiankun vue
在src目录下，创建一个App.vue文件，这是微前端应用程序的入口文件：
<template>
<div>
<h1>微前端应用程序</h1>
</div>
</template>
<script>
export default {
name: 'MicroApp'
}
</script>
在public目录下，创建一个index.html文件，这是微前端应用程序的HTML入口文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="/src/main.js"></script>
</body>
</html>
- 配置qiankun
在主应用的src目录下，创建一个main.js文件，这是主应用的入口文件：
import { createApp } from 'vue'
import { registerMicroApps, start } from 'qiankun'
const app = createApp({})
registerMicroApps([
{
name: 'micro-app',
entry: '/micro-app/index.html',
container: '#app',
},
])
start()
app.mount('#app')
在micro-app的src目录下，创建一个main.js文件，这是微前端应用程序的入口文件：
import { createApp } from 'vue'
import MicroApp from './App.vue'
createApp(MicroApp).mount('#app')
- 运行应用程序
在主应用目录下，运行以下命令：
npm run serve
在微前端应用程序目录下，运行以下命令：
npm run serve
现在，您可以访问http://localhost:8080来查看主应用，然后点击微前端应用程序的链接来加载微前端应用程序。
总结
本文介绍了如何从零开始搭建一个qiankun微前端demo。qiankun是一个用于构建微前端应用程序的库，它提供了开箱即用的功能，例如：模块注册和加载、路由管理、状态管理和通信机制。qiankun可以与任何前端框架一起使用，例如：React、Vue和Angular。
