>首页> IT >

react项目中如何运行vue组件?方法介绍

时间:2022-04-12 08:06:28       来源:转载
react项目中如何运行vue组件?下面本篇文章就通过示例给大家介绍一下在react项目中运行vue组件的方法,希望对大家有所帮助!

此文的背景源于面试中,被问到,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中文网其它相关文章!

关键词: 相关文章 介绍一下