本篇內容介紹了“react項目中怎么運行vue組件”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都做網(wǎng)站、成都網(wǎng)站建設、成都外貿網(wǎng)站建設、岳陽網(wǎng)絡推廣、重慶小程序開發(fā)、岳陽網(wǎng)絡營銷、岳陽企業(yè)策劃、岳陽品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供岳陽建站搭建服務，24小時服務熱線：028-86922220，官方網(wǎng)址：jinyejixie.com

先看實現(xiàn)效果

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

具體如何實現(xiàn)？

實現(xiàn)原理

• 引入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>
          <h2>我是vue : {{aaa}}</h2>
          <h2>我是vue : {{aaa}}</h2>
          <h2>我是vue : {{aaa}}</h2>
          <button @click="aaa++">按鈕</button>
        </div>
      `,
      data () {
        return {
          aaa: 2222
        }
      }
    }
    new Vue({
      render: h => h(Foo),
    }).$mount('#vueApp')
  }

  render() {
    return (
      <div>
        <h2>當前是react項目內</h2>
        <h2>當前是react項目內</h2>
        以下將渲染vue組件
        <div id="vueApp" />
      </div>
    )
  }
}

注意：

如果只需支持vue的組件選項對象的話，那么不用配置webpack，就完了

vue的組件選項對象 指的是：

const Foo = { 
    template: ` 
        <div> 
            <h2>我是vue : {{aaa}}</h2>
            <h2>我是vue : {{aaa}}</h2> 
            <h2>我是vue : {{aaa}}</h2> 
            <button @click="aaa++">按鈕</button> 
        </div> 
    `, 
    data () { 
        return { 
            aaa: 2222 
        } 
    } 
}

高級版

此處高級版指的是：需要支持 .vue文件/組件（上面的demo，直接是組件選項對象，沒有.vue文件）

比如：（繼續(xù)用上面的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

• 官網(wǎng)：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組件，配置上的區(qū)別！

	一定需要配置webpack.config.js的loader嗎？
在vue項目中使用react組件	yes，需配置babel-loader，編譯.jsx文件，需要額外注意配babel-loader的option選項
在react項目中使用vue組件	no，如果不用解析.vue文件的話，直接用vue的組件選項對象語法的話，那么不用額外的配置vue-loader。需要支持.vue文件的話，需要配vue-loader

“react項目中怎么運行vue組件”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

新聞名稱：react項目中怎么運行vue組件
當前網(wǎng)址：http://jinyejixie.com/article44/pdchhe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設計、網(wǎng)站排名、商城網(wǎng)站、企業(yè)建站、ChatGPT、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)