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

153 阅读 0 评论 101 点赞

我是靠谱客的博主冷傲哑铃，这篇文章主要介绍react项目中如何运行vue组件？方法介绍，现在分享给大家，希望可以做个参考。

react项目中如何运行vue组件？下面本篇文章就通过示例给大家介绍一下在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>
      </div>
    )
  }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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 
        } 
    } 
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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')
  }

  ...
}1
2
3
4
5
6
7
8
9
10
11
12
13
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()
  ]
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 在 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