目录
前言
首先需求是领导要求咱融合两个项目, 一个是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