qiankun-example 实战

qiankun 实战篇，主应用 vue3+vite，微应用用 vue2 和 vue3

• 主应用 qiankuan-base-vue3 vue3 + vite + unocss
• 微应用 qiankun-micro-vue3 vue3 + vite
• 微应用 qiankun-micro-vue2 vue2 + webpack

🍎 环境

• node 16.14.2 +
• pnpm 8.5.1 +

🎃 功能清单

• 主应用/微应用间路由相互跳转
• 全局数据通信
• 路由面包屑
• 主题样式隔离
  • element-plus: 使用自定义命名空间。
• unocss 样式隔离

✋ 快速开始

# 克隆项目
git clone https://github.com/chenyajin/qiankun-example.git

# 进入项目
cd qiankun-example

# 安装根目录工程依赖
pnpm i

#一键安装所有主/微应用的依赖
npm run install

# 一键启动所有所有应用
npm run start

通过 http://127.0.0.1:5173/ 访问主应用。

💣 问题记录

• 子应用 vue2 版本需要升级到 v2.7.8,才可以避免一些报错。

  Vue version 2.6.x 时，会遇到此报错：Property or method “__v_isRef” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property。 报错时间点：应用了 qiankun 微前端架构，在主应用和子应用之间进行传值时发生。 报错原因：尚不明确，猜测是主应用响应式数据传递给子应用，子应用对该数据进行了递归响应式处理。 解决方法：升级 Vue 版本到 2.7.8，对应的 vue-template-compiler 也升级到 2.7.8。

• element-plus 主题样式隔离，需区分是全局引入 or 按需引入。

  qiankun 自己的样式隔离方案： shadow dom 和 scoped，目前都存在明显问题。所以在本例子里没有采用，而是用了 vue 的 scoped css 来实现。文章

  全局引入配置仍需加上 参考官方模版

  // styles/element/index.scss
  
  @use 'element-plus/theme-chalk/src/index.scss' as *;

  按需引入配置仍需加上 参考官方模版

  // vite.config.ts
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  
  Components({
    resolvers: [
      ElementPlusResolver({
        importStyle: 'sass',
      }),
    ],
  })