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

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

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

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

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

【相关推荐：redis视频教程、vuejs教程】

先看实现效果

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

• 官网：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组件，配置上的区别！

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

作者：Bigtree

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！