react專案中如何運行vue元件？方法介紹

react專案中如何運行vue元件？以下這篇文章就透過範例跟大家介紹一下在react專案中執行vue元件的方法，希望對大家有幫助！

此文的背景源自於面試中，被問到，vue和react元件假如需要互通和復用，如何優雅的實現？

除了，開發者手動轉程式碼外。目前，我能想到的就2種解決方案

• 方案一：vue程式碼與react程式碼互轉（元件庫同步）

• 方案二：直接讓vue元件在React專案中運行，反之也可以。

【相關推薦：Redis影片教學、vuejs教學】

先看實現效果

vue元件在reat中正常渲染了，而且我還點擊了按鈕3下，vue的回應和render也都正常

#具體如何實現？

實作原理

• # 介紹vue的完整版（考慮效能的話，可以按需引入）

• 等到componentDidMount階段，掛載好<div id="vueApp"></div>後

• 在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 id="我是vue-nbsp-nbsp-aaa">我是vue : {{aaa}}</h1>
          <h1 id="我是vue-nbsp-nbsp-aaa">我是vue : {{aaa}}</h1>
          <h1 id="我是vue-nbsp-nbsp-aaa">我是vue : {{aaa}}</h1>
          <button @click="aaa++">按钮</button>
        </div>
      `,
      data () {
        return {
          aaa: 2222
        }
      }
    }
    new Vue({
      render: h => h(Foo),
    }).$mount(&#39;#vueApp&#39;)
  }

  render() {
    return (
      <div>
        <h1 id="当前是react项目内">当前是react项目内</h1>
        <h1 id="当前是react项目内">当前是react项目内</h1>
        以下将渲染vue组件
        <div id="vueApp" />
      </div>
    )
  }
}

注意：

##如果只要支援vue的元件選項物件的話，那麼不用設定webpack，就完成了

vue的元件選項物件指的是：

const Foo = { 
    template: ` 
        <div> 
            <h1 id="我是vue-nbsp-nbsp-aaa">我是vue : {{aaa}}</h1>
            <h1 id="我是vue-nbsp-nbsp-aaa">我是vue : {{aaa}}</h1> 
            <h1 id="我是vue-nbsp-nbsp-aaa">我是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專案一定需要設定webpack.config.js的loader嗎？ ，需要額外注意配babel-loader的option選項

	如果不用解析.vue檔案的話，直接用vue的元件選項物件語法的話，那麼不用額外的設定vue-loader
最後在比較一下，vue專案中使用react元件，和， react專案中使用vue元件，配置上的差異！
	在vue專案中使用react元件#yes，需設定babel-loader ，編譯.jsx檔

#在react專案中使用vue元件

no

，如果不用解析.vue檔的話，直接用vue的

元件選項物件

語法的話，那麼不用額外的設定vue-loader。需要

支援.vue檔###的話，需要配vue-loader###################本文轉載自：https://juejin.cn/post/ 7083303446161391623######作者：bigtree#########更多程式相關知識，請造訪：###程式設計影片###！ ！ ###

以上是react專案中如何運行vue元件？方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！