实现 vue&react 混合开发项目步骤-微前端

微前端是一种将多个小型前端应用组合成一个大型应用的架构方式。它允许团队独立开发、测试、部署和维护应用的各个部分。Vue.js 和 React 是两个流行的前端框架,它们可以在同一微前端架构下协同工作。

一、常规流程

1. 项目规划

确定项目的范围和目标。

设计应用的模块化结构,决定哪些部分使用 Vue 开发,哪些使用 React。
2. 搭建微前端架构

选择一个微前端框架或库,如 Bit、Single-spa 或 qiankun。

创建一个主应用(主框架),它将作为其他应用的宿主。
3. 创建独立应用

Vue 应用:使用 Vue CLI 创建新的 Vue 应用。

React 应用:使用 Create React App 创建新的 React 应用。
4. 定义应用入口和出口

为每个应用定义清晰的入口点和出口点,以便于主应用加载和卸载。
5. 配置路由

如果使用 qiankun,可以利用其提供的 bootstrap、mount、unmount 生命周期钩子进行路由配置。

对于 Single-spa,每个微前端应用可能是一个独立的 SPA,需要单独配置路由。
6. 通信机制

实现应用间的通信机制,如事件总线、全局状态管理(如 Redux)、或者通过主应用提供的上下文(context)传递数据。
7. 样式隔离

确保 Vue 和 React 应用的 CSS 是隔离的,避免样式冲突。
8. 构建和部署

配置构建系统(如 Webpack)以支持多应用构建。

部署时,确保每个应用的资源(如 JavaScript、CSS 和图片)都能正确加载。
9. 测试

对每个独立应用进行单元测试和端到端测试。

测试应用间的通信和数据传递是否正常。
10. 性能优化

对每个应用进行性能优化,如代码分割、懒加载等。

优化主应用与微应用之间的加载和切换性能。
11. 文档和规范

编写详细的开发文档和通信协议,确保团队成员理解整个系统的工作方式。
12. 维护和迭代

持续集成和持续部署(CI/CD)以支持应用的独立迭代。

定期审查架构,确保它仍然满足项目的需求。
注意事项

框架差异:Vue 和 React 在内部实现上有所不同,需要特别注意组件间通信和数据管理。

状态共享:如果需要共享全局状态,考虑使用 Redux 或其他状态管理库。

样式隔离:使用 CSS Modules 或 Scoped CSS 来隔离样式,避免冲突。

性能:微前端应用可能会增加页面加载时间,因此性能优化尤为重要。

二、简单案例

步骤 1: 初始化主应用 (React)

首先,使用 create-react-app 初始化一个 React 应用,这个应用将作为主应用:

npx create-react-app main-app
cd main-app
npm start

步骤 2: 创建 Vue 微应用

然后,使用 Vue CLI 创建一个 Vue 应用,这个应用将作为一个微应用:

vue create vue-micro-app
cd vue-micro-app
npm run serve

步骤 3: 配置 qiankun

在主应用中安装 qiankun 并进行配置:

npm install qiankun --save
在 main-app/src/index.js 中:

import React from 'react';
import ReactDOM from 'react-dom';
import { qiankun } from 'qiankun';
import './index.css';
import App from './App';

qiankun().bootstrap(() => {
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
});

步骤 4: 注册 Vue 微应用

在主应用中,使用 qiankun 提供的 API 注册 Vue 微应用:

// main-app/src/App.js
import React from 'react';
import { registerMicroApps, start } from 'qiankun';

const App = () => {
  // 注册 Vue 微应用
  registerMicroApps([
    {
      name: 'vueMicroApp', // 微应用名称
      entry: '//localhost:4200', // Vue 微应用的入口地址
      container: '#vue-container', // 微应用挂载点的 CSS 选择器
      activeRule: '/vue-micro-app', // 微应用的路由规则
    },
  ]);

  return (
    <div>
      <h1>React 主应用</h1>
      <div id="vue-container">Vue 微应用将挂载到这里</div>
    </div>
  );
};

export default App;

// 启动 qiankun
start();

确保在 main-app/public/index.html 中添加一个容器元素:

<div id="root">
  <!-- React 主应用内容 -->
  <div id="vue-container"></div>
</div>

步骤 5: 配置 Vue 微应用

在 Vue 微应用中,安装 qiankun 并进行配置:

cd vue-micro-app
npm install qiankun --save

在 vue-micro-app/src/main.js 中:

import Vue from 'vue';
import App from './App.vue';
import { bootstrap, mount, unmount } from 'qiankun';

// Vue 微应用的 bootstrap、mount 和 unmount 生命周期钩子
bootstrap(Vue, {
  Vue,
  App,
  // 其他配置...
});

mount(() => {
  // 渲染微应用
});

unmount(() => {
  // 卸载微应用
});

步骤 6: 启动应用

启动 React 主应用和 Vue 微应用:

# 在两个不同的终端中运行
cd main-app
npm start

cd vue-micro-app
npm run serve

通过浏览器访问 React 主应用,并在其中看到 Vue 微应用的内容。

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘4 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿7 小时前
webWorker基本用法
前端·javascript·vue.js