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

VUE3.0 をすぐに始める方法:

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

ただし、開発者が手動でコードを転送する必要があります。現在のところ、

• 解決策 1: vue コードと反応コードを変換する (コンポーネント ライブラリの同期)

• 解決策 2: React プロジェクトで vue コンポーネントを直接実行する、またはその逆。

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

vue コンポーネントは反応で正常にレンダリングされ、ボタンを 3 回クリックしました。vueの応答とレンダリングも正常でした。

これを実現するにはどうすればよいですか?

実装原則は、

• フルバージョンの vue を導入することです (パフォーマンスを考慮する場合は、オンデマンドで導入できます)

• 。componentDidMount 段階まで待って、 <div id="vueApp" />をマウントしてから、

• new Vue(..).$mount('#vueApp')

import Vue from 'vue/dist/vue.min.js' // 完全なバージョンを導入します。そうしないと、vue のコンポーネント オブジェクト構文を解析できません。 export default class App extends Component {
  コンストラクター(小道具) {
    スーパー(小道具)
  }
  
  コンポーネントDidMount() {
    const Foo = {
      テンプレート: `
        <div>
          <h1>私は vue: {{aaa}}</h1>
          <h1>私は vue: {{aaa}}</h1>
          <h1>私は vue: {{aaa}}</h1>
          <button @click="aaa++">ボタン</button>
        </div>
      `、
      データ （） {
        戻る {
          ああ: 2222
        }
      }
    }
    newVue({
      レンダリング: h => h(Foo)、
    }).$mount('#vueApp')
  }

  与える（） {
    戻る （
      <div>
        <h1>現在反応プロジェクトに参加中</h1>
        <h1>現在反応プロジェクトに参加中</h1>
        以下は、vue コンポーネント <div id="vueApp" /> をレンダリングします。
      </div>
    )
  }

注:

vue

のコンポーネント オプション

オブジェクトをサポートする必要があるだけの場合は、webpack を構成する必要はありません。

const Foo = { 
    テンプレート: ` 
        <div> 
            <h1>私は vue: {{aaa}}</h1>
            <h1>私は vue: {{aaa}}</h1> 
            <h1>私は vue: {{aaa}}</h1> 
            <button @click="aaa++">ボタン</button> 
        </div> 
    `、 
    データ （） { 
        戻る { 
            ああ: 2222 
        } 
    } 

高度なバージョン

、

.vue ファイル/コンポーネントをサポートする必要があることを指します (上記のデモは直接コンポーネント オプション オブジェクトであり、.vue ファイルはありません)

例: (上記のデモを引き続き使用し、.vue ファイルを変更します)

数行)

• .vue ファイルをインポートします: import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' //完全バージョンを導入します。そうしないと、vue のコンポーネント オブジェクトの構文を解析できません。 「./Foo.vue」の Foo;
デフォルトクラスをエクスポート App はコンポーネントを拡張します {
  ...
  
  コンポーネントDidMount() {
    newVue({
      レンダリング: h => h(Foo)、
    }).$mount('#vueApp')
  }

  ...

、

vue-loader

• 公式 Web サイトを設定する必要があります: https://vue-loader.vuejs.org/guide/#manual-setup

// webpack.config.js 内 const { VueLoaderPlugin } = require ('vue -loader')

module.exports = {
  モード: '開発'、
  モジュール: {
    ルール: [
      {
        テスト: /.vue$/、
        ローダー: 'vue-loader'
      }
    】
  }、
  プラグイン: [
    // マジック用のプラグインを必ず含めてください
    新しい VueLoaderPlugin()
  】
注

:

• テストするときは、react Scaffolding プロジェクトを使用せず、webpack.config.js を最初から構成する React プロジェクトを使用することをお勧めします。

• 最新バージョンの Scaffolding を使用する場合は、eject を実行した後、webpack.config に移動します。 js に書き込むと、VueLoaderPlugin が oneOf 構文と互換性がないため、エラーが報告されます。.vue

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

要約すると、

スキャフォールド プロジェクトの場合

• は、.vue ファイルを解析して vue のファイルを直接使用する必要がない場合は

• 、webpack.config.js を設定する反応プロジェクトを使用することをお勧めします。

• コンポーネント オプション オブジェクト構文を使用する場合、vue-loader を追加設定する必要はありません。

最後に、比較のために、vue プロジェクトの React コンポーネントは React プロジェクトで使用され、vue コンポーネントは React プロジェクトで使用されます。

この記事は

https://juejin.cn/post/7083303446161391623

から転載されました。