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 (
      <div className="App">
        <Header></Header>
        <div className="c_mode">
          <Mode></Mode>
        </div>
      </div>
    );
  };
  

• HelloWorld.vue

  <template>
    <div class="hello">
      <my-react-component @sendValue="sendValue"/>
    </div>
  </template>
  
  <script>
  import MyReactComponent from "./MyReactComponent.js";
  export default {
    name: "HelloWorld",
    props: {
      msg: String,
    },
    components: { "my-react-component": MyReactComponent },
    methods: {
      sendValue(value) {
        console.log(value, "3");
      },
    },
  };
  </script>