Reactプロジェクトでvueコンポーネントを実行するにはどうすればよいですか?手法の紹介-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2022-04-11 20:51:28

転載

4560 人が閲覧しました

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

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

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

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

解決策 1: Vue コードと React コードの相互変換 (コンポーネントライブラリの同期)
オプション 2 : vue コンポーネントを React プロジェクトで直接実行できます。また、その逆も可能です。

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

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

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

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

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

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

実装原則

完全版の vue を導入します (パフォーマンスを考慮する場合は、オンデマンドで)
componentDidMount ステージまで待機し、

その後、## をマウントします。

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

import Vue from &#39;vue/dist/vue.min.js&#39; // 引入完整版，否则不能解析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(&#39;#vueApp&#39;)
  }

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

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

.vue ファイルをインポートするように変更しました:

import Vue from &#39;vue/dist/vue.min.js&#39; // 引入完整版，否则不能解析vue的组件对象语法
import Foo from "./Foo.vue";
export default class App extends Component {
  ...
  
  componentDidMount() {
    new Vue({
      render: h => h(Foo),
    }).$mount(&#39;#vueApp&#39;)
  }

  ...
}

ログイン後にコピー

現時点で有効にするには、vue-loader

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

// 在 webpack.config.js 内
const { VueLoaderPlugin } = require(&#39;vue-loader&#39;)

module.exports = {
  mode: &#39;development&#39;,
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: &#39;vue-loader&#39;
      }
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ]
}

ログイン後にコピー

#注意事項

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

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

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

テストするときは、反応足場プロジェクトを使用しないでください

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

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

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