目录
前言
????????首先需求是领导要求咱融合两个项目， 一个是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。
飞冰项目解决办法
? ? ? ? 飞冰项目的解决办法是下边地址的文章，大家都可以去看看，开篇有彩蛋。
报错解决?
? ? ? ? DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.?
如何解决vue的ui库问题?
? ? ? ? 如果vue组件中使用了ui库该如何处理，欢迎继续观看呕心沥血小型连续剧呕心沥血之react中引入注册vue的UI库 -- vuera_不应识的博客-CSDN博客https://blog.csdn.net/baidu_41632421/article/details/125087151?spm=1001.2014.3001.5501