这里的 swiper 是由 fex-team 团队开源的轻量级翻页插件

项目地址

下载插件

拉取项目到本地进行打包，或者直接打包好的文件

使用 qiankun 集成 react18+vite 项目

基座项目

基座项目可见qiankun 示例

子应用改造

vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun

pnpm install vite-plugin-qiankun

使用 qiankun 集成 vue2+vite 项目

基座项目

基座项目可见qiankun 示例

子应用改造

vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun

pnpm install vite-plugin-qiankun

使用 qiankun 集成 vue2+webpack 项目

基座项目

基座项目可见qiankun 示例

子应用改造

子应用不需要额外安装任何其他依赖即可接入 qiankun 主应用

配置环境变量

配置环境变量，是子应用既可以单独运行又可以接入主应用

然后在 package.json 中配置启动脚本

使用 qiankun 集成 vue3+vite 项目

基座项目

基座项目可见qiankun 示例

子应用改造

vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun

pnpm install vite-plugin-qiankun

项目地址

qiankun-template

搭建基座项目

在命令行中运行以下命令

pnpm create vue@latest

qiankun 是一个基于 single-spa 的微前端实现库

qiankun 集成子项目示例

详见qiankun 示例

props

主应用中定义 props

在主应用中，注册子应用的基础配置信息时，定义 props ，编写需要传递给子应用的信息

const apps: RegistrableApp<any>[] = [
  // ...
  {
    name: 'app2',
    entry: 'http://localhost:8082/app2',
    container: '#microApp',
    activeRule: '/app2',
    props: {
      title: 'props 传递的参数'
    }
  },
]

vue3 新增了 setup 语法糖，相应的 props，也会有相应的变化

defineProps

在使用 <script setup> 语法糖的组件中，props 可以使用 defineProps() 宏来声明

在 Vue3 中，定义一个全局变量，便于在各个文件中直接使用，而无需每次都引入

设置全局变量

通过在 main.ts 入口文件中注册 Vue 的时候绑定全局变量，这里以 http 模块为例

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

const app = createApp(App);
app.config.globalProperties.$http = http;

app.mount('#app');

vite 对 TypeScript 的支持

创建 vite 项目

使用命令行创建使用 js 的 vite 项目

pnpm create vite