Reactプロジェクトでvueコンポーネントを実行するにはどうすればよいですか?手法の紹介

reactプロジェクトで vue コンポーネントを実行するにはどうすればよいですか?次の記事では、React プロジェクトで vue コンポーネントを実行する方法を例を通して紹介します。

この記事の背景はインタビューによるものです。vue コンポーネントと React コンポーネントを相互運用して再利用する必要がある場合、どうすればそれらをエレガントに実装できるかという質問がありました。 ?

開発者が手動でコードを転送する場合を除きます。現在のところ、解決策は 2 つしか思いつきません。

• 解決策 1: Vue コードと React コードの相互変換 (コンポーネント ライブラリの同期)

• オプション 2 : vue コンポーネントを React プロジェクトで直接実行できます。また、その逆も可能です。

【関連する推奨事項: Redis ビデオ チュートリアル 、vuejs チュートリアル ]

まずは実装の効果を見てみましょう

##vue コンポーネントは通常どおり Reat でレンダリングされ、

ボタンを 3 回クリックしました,vueのレスポンスやレンダリングも正常です

具体的にはどうやって実装すればいいのでしょうか？

実装原則

• 完全版の 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: `
          <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 ファイル/コンポーネントのサポートが必要 (上記のデモは直接コンポーネント オプション オブジェクトです) 、.vue ファイルなし)

例: (上記のデモを引き続き使用し、数行を変更します)

.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()
  ]
}

• #注意事項

提案 テストするときは、反応スキャフォールド プロジェクトを使用しないでください

。webpack.config.js を最初から構成する反応プロジェクトを使用してください

• #現在使用しているスキャフォールディングの最新バージョンでは、eject 実行後、webpack.config.js に記述するときにエラーが報告されます。これは、VueLoaderPlugin が oneOf 構文と互換性がないためです。

使用しない場合 .vue ファイルを解析し、vue のコンポーネント オプション オブジェクト構文を直接使用する場合、vue-loader を設定する必要はありません
概要

• テストするときは、反応足場プロジェクトを使用しないでください
、webpack.config.jsを最初から構成する反応プロジェクトを使用することをお勧めします

#.vue ファイルを解析する必要がない場合、vue のコンポーネント オプション オブジェクト構文を直接使用する場合は、vue-loader を設定する必要はありません
最後に、比較のために、vue プロジェクトで使用します。React コンポーネントと、React プロジェクトで使用される Vue コンポーネントの構成の違いです。

webpack.config.js のローダーを設定する必要がありますか?

#vue プロジェクトで反応コンポーネントを使用するはいbabel-loader## を設定する必要があります# ,.jsx ファイルをコンパイルします、babel-loader のオプション オプションに特に注意する必要があります反応プロジェクトで vue コンポーネントを使用します が必要な場合は、、vue-loader を設定する必要があります

	、
	no、.vue ファイルを解析する必要がなく、vue の コンポーネント オプション オブジェクト 構文を直接使用する場合、追加の構成は必要ありません vue-loader## ＃ が必要です。 .vue ファイルをサポートするために
	##この記事は、https://juejin から転載されています。 .cn/post/ 7083303446161391623著者: bigtreeプログラミング関連の知識については、 プログラミング ビデオ をご覧ください。 ！

以上がReactプロジェクトでvueコンポーネントを実行するにはどうすればよいですか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。