Wie führe ich Vue-Komponenten im React-Projekt aus? Methodeneinführung

Wie führe ich

vue-Komponenten im react-Projekt aus? Der folgende Artikel stellt Ihnen anhand von Beispielen vor, wie Sie Vue-Komponenten in React-Projekten ausführen. Ich hoffe, er wird Ihnen hilfreich sein!

Der Hintergrund dieses Artikels stammt aus einem Interview. Ich wurde gefragt: Wenn Vue- und React-Komponenten zusammenarbeiten und wiederverwendet werden müssen, wie können sie elegant implementiert werden?

Außer dass Entwickler den Code manuell übertragen. Derzeit fallen mir nur 2 Lösungen ein

• Option 1: Gegenseitige Konvertierung von Vue-Code und Reaktionscode (Synchronisation der Komponentenbibliothek)

• Option 2: Lassen Sie die Vue-Komponente direkt im React-Projekt laufen und umgekehrt umgekehrt Kann. 🔜 auch angeklickt Nach dreimaligem Drücken der Taste

  sind die Reaktion und das Rendering von
vue ebenfalls normal

Wie wird es konkret umgesetzt?

Implementierungsprinzip

Führen Sie die Vollversion von Vue ein (wenn Sie die Leistung berücksichtigen, können Sie sie bei Bedarf einführen)

Warten Sie, bis die KomponenteDidMount-Stufe erreicht ist, und mounten Sie <div id="vueApp"></div>Nach

in 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>
    )
  }
}

Hinweis:

• Wenn Sie nur das Komponentenoptionsobjekt von vue unterstützen müssen, müssen Sie das Webpack nicht konfigurieren.

Vues Komponentenoptionsobjekt bezieht sich auf:

• 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 
          } 
      } 
  }

  Erweiterte Version<div id="vueApp" />后

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

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的组件选项对象的话，那么不用配置webpack，就完了

vue的组件选项对象 指的是：

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

高级版

此处高级版指的是：需要支持 .vue文件/组件（上面的demo，直接是组件选项对象，没有.vue文件）

比如：（继续用上面的demo，改几行）

• 改成了引入.vue文件： import Foo from "./Foo.vue";

Dies Die erweiterte Version bezieht sich auf:

Muss .vue-Dateien/-Komponenten unterstützen (die obige Demo ist direkt das Komponentenoptionsobjekt, es gibt keine .vue-Datei)

Zum Beispiel: (Verwenden Sie weiterhin die Demo oben und ändern Sie ein paar Zeilen)

• Geändert zum Importieren von .vue-Dateien: import Foo from „./Foo.vue“;

rrreeeUm zu diesem Zeitpunkt wirksam zu werden, benötigen Sie So konfigurieren Sie den Vue-Loader , verwenden Sie keine React-Scaffolding-Projekte, verwenden Sie Scratch. Konfigurieren des React-Projekts von webpack.config.js

• Wenn ich derzeit die neueste Version von Scaffolding verwende, erhalte ich nach dem Ausführen von eject beim Einschreiben eine Fehlermeldung webpack.config.js, da VueLoaderPlugin nicht mit der Syntax von oneOf kompatibel ist -loader zusätzlich Wenn Sie die .vue-Datei nicht analysieren und die Objektsyntax der Komponentenoption von vue nicht direkt verwenden müssen, ist es nicht erforderlich, den Vue-Loader zu konfigurieren Verwendung von Vue-Komponenten in React-Projekten!

Muss ich den Loader von webpack.config.js konfigurieren?

Wenn Sie React-Komponenten in Vue-Projekten verwenden

Ja

, müssen Sie
• babel-loader

  und jsx-Dateien kompilieren konfigurieren und den Optionen von babel-loader besondere Aufmerksamkeit schenken

• in Reaktion Die Vue-Komponente

  Nein
wird im Projekt verwendet. Wenn Sie die .vue-Datei nicht analysieren und die Syntax des

Komponentenoptionsobjekts

von Vue nicht verwenden müssen, ist keine zusätzliche Konfiguration erforderlich Vue-Loader. Wenn Sie .vue-Dateien unterstützen müssen, müssen Sie den Vue-Loader konfigurieren Programmierkenntnisse finden Sie unter:

Programmiervideos! !

Das obige ist der detaillierte Inhalt vonWie führe ich Vue-Komponenten im React-Projekt aus? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!