如何在react项目中巧妙运行vue组件？

本文共计1276个文字，预计阅读时间需要6分钟。

在React项目中运行Vue组件，可以通过以下方法实现：

1. 使用`react-vue`库：这是一个将Vue组件集成到React项目中非常方便的库。你可以通过以下步骤进行集成：

- 安装`react-vue`库： bash npm install react-vue - 在React组件中引入并使用Vue组件： jsx import React from 'react'; import Vue from 'react-vue';

class MyComponent extends React.Component { render() { return ( ); } }

export default MyComponent;

2. 使用`vue-renderer`库：这个库允许你将Vue组件渲染为React组件。

- 安装`vue-renderer`库： bash npm install vue-renderer - 在React组件中使用Vue组件： jsx import React from 'react'; import { renderToString } from 'vue-renderer';

class MyComponent extends React.Component { render() { return ( {renderToString()} ); } }

export default MyComponent;

希望这些信息能对您有所帮助！如果您有其他问题，欢迎继续提问。

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

此文的背景源于面试中，被问到，vue和react组件假如需要互通和复用，如何优雅的实现？

除了，开发者手动转代码外。目前，我能想到的就2种解决方案

• 方案一：vue代码和react代码互转（组件库同步）

• 方案二：直接让vue组件在React项目中运行，反之也可以。

先看实现效果

vue组件在reat中正常渲染了，并且我还点击了按钮 3下，vue的响应和render也都正常

具体如何实现？

实现原理

• 引入vue的完整版（考虑性能的话，可以按需引入）

• 等到componentDidMount阶段，挂载好<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，改几行）

• 改成了引入.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

• 官网：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

本文转载自：juejin.cn/post/7083303446161391623

作者：bigtree

更多编程相关知识，请访问：编程视频！！

以上就是react项目中如何运行vue组件？方法介绍的详细内容，更多请关注自由互联其它相关文章！