呕心沥血之react中使用vue组件 -- vuera

目录

前言

介绍vuera

补充vue环境

配置环境

其他项目

飞冰项目解决办法

报错解决 

如何解决vue的ui库问题 

---

前言

        首先需求是领导要求咱融合两个项目， 一个是vue一个是react。 什么？重写？那不愣小子吗，费劲的事咱可不干。

        于是乎，就有了这个呕心沥血（起码半升）的文章，读者诸君请继续往下看。

介绍vuera

        这个组件是实现react与vue融合的关键，但是使用教程介绍太少，这篇文章主要就是对使用教程的补充，下面是组件的官网地址，大家一定要仔细看下文档。

        npm地址:vuera - npm (npmjs.com)https://www.npmjs.com/package/vuera        github地址:akxcv/vuera: Vue in React, React in Vue. Seamless integration of the two. (github.com)https://github.com/akxcv/vuera#readme

补充vue环境

        虽说有了vuera这个组件，但是vue的环境也要补充一下，这也是融合成功关键所在。

        安装vue，vue-loader，vue-template-compiler，vuera， 此处需要注意vue的版本与vue-template-compiler的版本要保持一致。如果大家对版本没有太高要求，我这有建议版本（毕竟已经呕过吐过，绝对好使），大家安装的时候带上版本号。

"vue": "^2.6.10",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"vuera": "^0.2.7",

配置环境

1.配置vue-loader，此处只展示差异，请结合你的项目。

//webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = function(webpackEnv) {
    //你的代码...

    module: {
      rules: [
        { // add vue-loader
          test: /\.vue$/,
          loader: 'vue-loader',
        },
        //你的代码...
    },
    plugins: [
      new VueLoaderPlugin()
      //你的代码...
    ]
    
    //你的代码...
}

2.配置.babelrc，没有这个文件的在项目根目录新建.babelrc文件

//.babelrc

{
    "presets": ["react-app"],
    "plugins": [
        "vuera/babel"
    ]
}

         大功告成，此时你已经可以在react中使用vue的组件，建议先弄个简单的组件测试一下， 此处不再赘述，可参看vuera中的例子。

        另外，这里有个大佬的vuera示例项目，大家可以参考学习下timsayshey/vuera-react-vue-demo-app: Just trying to get Vuera to load Vue into a React App (github.com)https://github.com/timsayshey/vuera-react-vue-demo-app

其他项目

        至此，如果大家是正常的webpack项目，已经可以点赞收藏好评结束下班了。

        但偏偏，风渐渐······ 

        如果大家有非正常项目的，容我先笑为敬（因为我先哭过了，边呕边沥边哭），我接手的这个项目用的就是‘飞冰’搭建的，听没听过不重要。重要的是大家可以了解下webpack在你的项目中应该怎么配置，然后实现上边说的配置vue-loader与配置.babelrc。

飞冰项目解决办法

        飞冰项目的解决办法是下边地址的文章，大家都可以去看看，开篇有彩蛋。

呕心沥血之飞冰项目使用vue组件_不应识的博客-CSDN博客https://blog.csdn.net/baidu_41632421/article/details/125068587?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125068587%22%2C%22source%22%3A%22baidu_41632421%22%7D&ctrtid=X9cbF

报错解决 

        DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 

akxcv/vuera: Vue in React, React in Vue. Seamless integration of the two. (github.com)https://github.com/akxcv/vuera/issues/91

如何解决vue的ui库问题 

        如果vue组件中使用了ui库该如何处理，欢迎继续观看呕心沥血小型连续剧呕心沥血之react中引入注册vue的UI库 -- vuera_不应识的博客-CSDN博客https://blog.csdn.net/baidu_41632421/article/details/125087151?spm=1001.2014.3001.5501