此文的背景源于面试中，被问到，vue和react组件假如需要互通和复用，如何优雅的实现？
除了，开发者手动转代码外。目前，我能想到的就2种解决方案
方案一：vue代码和react代码互转（组件库同步）
方案二：直接让vue组件在React项目中运行，反之也可以。
【相关推荐：Redis视频教程、vuejs教程】
先看实现效果
vue组件在reat中正常渲染了，并且我还点击了按钮 3下，vue的响应和render也都正常
具体如何实现？
实现原理
引入vue的完整版（考虑性能的话，可以按需引入）
等到componentDidMount阶段，挂载好后
在new Vue(..).$mount("#vueApp")
import Vue from "vue/dist/vue.min.js" // 引入完整版，否则不能解析vue的组件对象语法export default class App extends Component { constructor(props) { super(props) } componentDidMount() { const Foo = { template: ` 我是vue : {{aaa}}
我是vue : {{aaa}}
我是vue : {{aaa}}
`, data () { return { aaa: 2222 } } } new Vue({ render: h => h(Foo), }).$mount("#vueApp") } render() { return ( 当前是react项目内
当前是react项目内
以下将渲染vue组件 ) }}注意：
如果只需支持vue的组件选项对象的话，那么不用配置webpack，就完了
vue的组件选项对象 指的是：
const Foo = { template: ` 我是vue : {{aaa}}
我是vue : {{aaa}}
我是vue : {{aaa}}
`, data () { return { aaa: 2222 } } }高级版
此处高级版指的是：需要支持 .vue文件/组件（上面的demo，直接是组件选项对象，没有.vue文件）
比如：（继续用上面的demo，改几行）
改成了引入.vue文件：import Foo from "./Foo.vue";import Vue from "vue/dist/vue.min.js" // 引入完整版，否则不能解析vue的组件对象语法import Foo from "./Foo.vue";export default class App extends Component { ... componentDidMount() { new Vue({ render: h => h(Foo), }).$mount("#vueApp") } ...}此时要想生效，需要配置vue-loader
官网：https://vue-loader.vuejs.org/guide/#manual-setup// 在 webpack.config.js 内const { VueLoaderPlugin } = require("vue-loader")module.exports = { mode: "development", module: { rules: [ { test: /.vue$/, loader: "vue-loader" } ] }, plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin() ]}注意点
建议大家test的时候，不要用react的脚手架起的项目，用从零配置webpack.config.js的react项目
我当前用最新版的脚手架时，run eject后，去往 webpack.config.js 里面写会报错，因为 VueLoaderPlugin 不兼容一个 oneOf的语法
如果不用解析.vue文件的话，直接用vue的组件选项对象语法的话，那么不用额外的配置vue-loader
总结
建议大家test的时候，不要用react的脚手架起的项目，用从零配置webpack.config.js的react项目
如果不用解析.vue文件的话，直接用vue的组件选项对象语法的话，那么不用额外的配置vue-loader
最终在对比一下，vue项目中使用react组件，和， react项目中使用vue组件，配置上的区别！
| 一定需要配置webpack.config.js的loader吗？ | |
|---|---|
| 在vue项目中使用react组件 | yes，需配置babel-loader，编译.jsx文件，需要额外注意配babel-loader的option选项 |
| 在react项目中使用vue组件 | no，如果不用解析.vue文件的话，直接用vue的组件选项对象语法的话，那么不用额外的配置vue-loader。需要支持.vue文件的话，需要配vue-loader |
更多编程相关知识，请访问：编程视频！！
以上就是react项目中如何运行vue组件？方法介绍的详细内容，更多请关注php中文网其它相关文章！
