100字范文 > react项目中如何运行vue组件？方法介绍

react项目中如何运行vue组件？方法介绍

时间：2023-01-12 17:47:41

web前端|js教程

react,vue

web前端-js教程

react项目中如何运行vue组件？下面本篇文章就通过示例给大家介绍一下在react项目中运行vue组件的方法，希望对大家有所帮助！

javascript网络源码下载,ubuntu 更换清华源,tomcat端口一闪,kali用爬虫,php程序免费版,seo磁力lzw

分类信息源码开源版,虚拟机中下载vscode,ubuntu自动休眠,flask部署用tomcat,sqlite c 配置,动态网页设计试题,outlook手机邮箱服务器,大地图坐标插件,dwz 前端框架,长小爬虫,php加水印,爱站网seo培训教程,springboot 组件开发,手机国外视频聊天网站源码,在线编辑网页代码,网页模板怎么上传,网站模板和后台,ins页面模板,办公管理系统软件,淘宝单页面程序lzw

此文的背景源于面试中，被问到，vue和react组件假如需要互通和复用，如何优雅的实现？

精美聊天室源码,ubuntu的上网设置,tomcat服务器配置站点,有道python爬虫,php学生成绩查询网站,卫辉seo推广lzw

除了，开发者手动转代码外。目前，我能想到的就2种解决方案

方案一：vue代码和react代码互转（组件库同步）

方案二：直接让vue组件在React项目中运行，反之也可以。

先看实现效果

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}}

`,data () { return {aaa: 2222 }} } new Vue({render: h => h(Foo), }).$mount(#vueApp) } render() { return (

当前是react项目内

以下将渲染vue组件 ) }}

注意：

如果只需支持vue的组件选项对象的话，那么不用配置webpack，就完了

vue的组件选项对象指的是：

const Foo = {template: `

我是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-/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