1. 首頁 > 生活百科 > >

react項目中如何運行vue組件？方法介紹

it知識小知識

react項目中如何運行vue組件？下面本篇文章就通過示例給大家介紹一下在react項目中運行vue組件的方法 ， 希望對大家有所幫助！

react項目中如何運行vue組件？方法介紹

文章插圖

此文的背景源于面試中 ， 被問到 ， vue和react組件假如需要互通和復用 ， 如何優雅的實現？
除了 ， 開發者手動轉代碼外 。 目前 ， 我能想到的就2種解決方案
    方案一：vue代碼和react代碼互轉（組件庫同步）
    方案二：直接讓vue組件在React項目中運行 ， 反之也可以 。
【相關推薦：Redis視頻教程、vuejs教程】
先看實現效果
react項目中如何運行vue組件？方法介紹

文章插圖

vue組件在reat中正常渲染了 ， 并且我還點擊了按鈕 3下 ， vue的響應和render也都正常
具體如何實現？實現原理
    引入vue的完整版（考慮性能的話 ， 可以按需引入）
    等到componentDidMount階段 ， 掛載好<div id="vueApp" />后
    在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: ` <div> <h1>我是vue : {{aaa}}</h1> <h1>我是vue : {{aaa}}</h1> <h1>我是vue : {{aaa}}</h1> <button @click="aaa++">按鈕</button> </div> `, data () { return { aaa: 2222 } } } new Vue({ render: h => h(Foo), }).$mount('#vueApp') } render() { return ( <div> <h1>當前是react項目內</h1> <h1>當前是react項目內</h1> 以下將渲染vue組件 <div id="vueApp" /> </div> ) }}注意：
如果只需支持vue的組件選項對象的話 ， 那么不用配置webpack ， 就完了
vue的組件選項對象 指的是：
const Foo = { template: ` <div> <h1>我是vue : {{aaa}}</h1> <h1>我是vue : {{aaa}}</h1> <h1>我是vue : {{aaa}}</h1> <button @click="aaa++">按鈕</button> </div> `, 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-loader.vuejs.org/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
總結
    建議大家test的時候 ， 不要用react的腳手架起的項目 ， 用從零配置webpack.config.js的react項目
    如果不用解析.vue文件的話 ， 直接用vue的組件選項對象語法的話 ， 那么不用額外的配置vue-loader
最終在對比一下 ， vue項目中使用react組件 ， 和 ， react項目中使用vue組件 ， 配置上的區別！
一定需要配置webpack.config.js的loader嗎？在vue項目中使用react組件yes ， 需配置babel-loader ， 編譯.jsx文件 ， 需要額外注意配babel-loader的option選項在react項目中使用vue組件no ， 如果不用解析.vue文件的話 ， 直接用vue的組件選項對象語法的話 ， 那么不用額外的配置vue-loader 。 需要支持.vue文件的話 ， 需要配vue-loader
本文轉載自：https://juejin.cn/post/7083303446161391623
作者：bigtree
更多編程相關知識 ， 請訪問：編程視頻?。?

推薦閱讀