Vue项目中使用React组件(antd组件库也可以)，React中使用Vue组件

在Vue项目中使用React组件(antd组件库也可以)，在React中使用Vue组件

• 下面我写个demo教大家如何在Vue组件库中使用React组件甚至antd组件
• 触类旁通,在React中使用Vue组件，自行解决.
• 不推荐企业级项目中使用。

使用vue-cli创建项目

• 这个大家应该都会，不会的话看下
  • Vue-Cli脚手架(Vue全家桶之一详解)

下载依赖

• 下载React
  • npm install --save react react-dom
  • 自行下载React相关组件库
• 下载vuera，这样就可以在Vue项目中使用React组件(antd组件库也可以)，在React中使用Vue组件
  • npm i -S vuera
    • https://www.npmjs.com/package/vuera
    • https://github.com/akxcv/vuera
• 下载识别react-jsx语法的依赖
  • npm install @babel/plugin-transform-react-jsx //识别 jsx 语法
  • npm install @vue/cli-plugin-babel
    • 如果package.json没有@vue/cli-plugin-babel再下
    • //解决You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. -》 <\div className=“App”>

配置

• main.js文件

  import { VuePlugin } from "vuera";
  Vue.use(VuePlugin);
  

• .babelrc文件

  {
    "plugins": ["@babel/transform-react-jsx"]
  }
  

• babel.config.js

  module.exports = {
    plugins: ["@babel/plugin-transform-react-jsx"]
  };
  

• vue.config.js文件
  • css module
    • requireModuleExtension: true//react的css，采用style-module,然后需要开启

项目中的使用

• MyReactComponent.js文件

  import React from "react";
  import Mode from "./mode.js";//react 组件
  import Header from "./header.js";//react 组件
  import "../assets/style/reset.css";
  import "./App.css";
  
  export default () => {
    return (
      
  
        
  
        
  
          
        
      
    );
  };
  

• HelloWorld.vue