目录

前言

介绍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

Logo

前往低代码交流专区

更多推荐