react项目中如何运行vue组件？方法介绍 _生活百科

react项目中如何运行vue组件？下面本篇文章就通过示例给大家介绍一下在react项目中运行vue组件的方法，希望对大家有所帮助！

文章插图

此文的背景源于面试中，被问到， vue和react组件假如需要互通和复用，如何优雅的实现？
除了，开发者手动转代码外。目前，我能想到的就2种解决方案

【相关推荐：Redis视频教程、vuejs教程】
先看实现效果

文章插图

vue组件在reat中正常渲染了，并且我还点击了按钮 3下， vue的响应和render也都正常
具体如何实现？实现原理

<div id="vueApp" />

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: ` <div> <h1>我是vue : {{aaa}}</h1> <h1>我是vue : {{aaa}}</h1> <h1>我是vue : {{aaa}}</h1> <button @click="aaa++">按钮</button> </div> `, data () { return { aaa: 2222 } } } new Vue({ render: h => h(Foo), }).$mount('#vueApp') } render() { return ( <div> <h1>当前是react项目内</h1> <h1>当前是react项目内</h1> 以下将渲染vue组件 <div id="vueApp" /> </div> ) }}注意：
如果只需支持vue的组件选项对象的话，那么不用配置webpack ，就完了
vue的组件选项对象指的是：
const Foo = { template: ` <div> <h1>我是vue : {{aaa}}</h1> <h1>我是vue : {{aaa}}</h1> <h1>我是vue : {{aaa}}</h1> <button @click="aaa++">按钮</button> </div> `, data () { return { aaa: 2222 } } }高级版此处高级版指的是：需要支持 .vue文件/组件（上面的demo ，直接是组件选项对象，没有.vue文件）
比如：（继续用上面的demo ，改几行）

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() ]}注意点

总结

最终在对比一下， 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