react项目中怎么运行vue组件

本篇内容介绍了"react项目中怎么运行vue组件"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

先看实现效果

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

"react项目中怎么运行vue组件"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！