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

So starten Sie schnell mit VUE3.0: Der Hintergrund zum Lernen

dieses Artikels stammt aus einem Interview. Ich wurde gefragt, ob Vue- und React-Komponenten zusammenarbeiten und wiederverwendet werden müssen.

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

• Lösung 1: Vue-Code konvertieren und Code reagieren (Komponentenbibliothekssynchronisierung).

• Lösung 2: Vue-Komponenten direkt im React-Projekt ausführen lassen und umgekehrt.

Schauen wir uns zunächst die Umsetzung an

auch

dreimal auf die Schaltfläche geklickt . Die Reaktion und das Rendern von Vue waren ebenfalls normal .

Das Implementierungsprinzip besteht

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

• , bis zur ComponentDidMount-Stufe warten, <div id="vueApp" /> mounten und dann

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

Vue aus 'vue/dist/vue.min.js' importieren // Vollständige Version einführen, sonst kann die Syntax des Vue-Komponentenobjekts nicht analysiert werden. Standardklasse exportieren. App erweitert Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
  }
  
  ComponentDidMount() {
    const Foo = {
      Vorlage: `
        <div>
          <h1>Ich bin vue: {{aaa}}</h1>
          <h1>Ich bin vue: {{aaa}}</h1>
          <h1>Ich bin vue: {{aaa}}</h1>
          <button @click="aaa++">Schaltfläche</button>
        </div>
      `,
      Daten () {
        zurückkehren {
          aaa: 2222
        }
      }
    }
    newVue({
      rendern: h => h(Foo),
    }).$mount('#vueApp')
  }

  render() {
    zurückkehren (
      <div>
        <h1>Derzeit im React-Projekt</h1>
        <h1>Derzeit im React-Projekt</h1>
        Im Folgenden wird die Vue-Komponente <div id="vueApp" /> gerendert
      </div>
    )
  }
}

Hinweis:

Wenn Sie nur das Komponentenoptionsobjekt von Vue unterstützen müssen, müssen Sie

das Komponentenoptionsobjekt von Vue nicht konfigurieren:

const Foo = { 
    Vorlage: ` 
        <div> 
            <h1>Ich bin vue: {{aaa}}</h1>
            <h1>Ich bin vue: {{aaa}}</h1> 
            <h1>Ich bin vue: {{aaa}}</h1> 
            <button @click="aaa++">Schaltfläche</button> 
        </div> 
    `, 
    Daten () { 
        zurückkehren { 
            aaa: 2222 
        } 
    } 
}

Erweiterte Version Die

erweiterte Version bezieht sich hier auf: .vue-Dateien/Komponenten müssen unterstützt werden (die obige Demo ist direkt das Komponentenoptionsobjekt, es gibt keine .vue-Datei.

Beispiel: (Verwenden Sie weiterhin die obige Demo und ändern Sie a.) wenige Zeilen)

• zum Importieren einer .vue-Datei: import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' //Führen Sie die Vollversion ein, andernfalls kann die Komponentenobjektsyntax von vue nicht analysiert werden Foo von „./ Foo.vue“;
Standardklasse exportieren App erweitert Komponente {
  ...
  
  ComponentDidMount() {
    newVue({
      rendern: h => h(Foo),
    }).$mount('#vueApp')
  }

  ...
}

Damit dies wirksam wird, müssen Sie die

• offizielle Vue-Loader-Website konfigurieren: https://vue-loader.vuejs.org/guide/#manual-setup

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

module.exports = {
  Modus: 'Entwicklung',
  Modul: {
    Regeln: [
      {
        test: /.vue$/,
        Lader: 'vue-loader'
      }
    ]
  },
  Plugins: [
    // Stellen Sie sicher, dass Sie das Plugin für die Magie einbinden
    neues VueLoaderPlugin()
  ]
}

Hinweis:

• Es wird empfohlen, beim Testen keine React-Scaffolding-Projekte zu verwenden , sondern React-Projekte, die webpack.config.js von Grund auf konfigurieren.

• Wenn ich die neueste Version von Scaffolding verwende, gehe nach dem Ausführen von eject zu webpack.config. Beim Schreiben von js wird ein Fehler gemeldet, da VueLoaderPlugin nicht mit einer oneOf-Syntax kompatibel ist.

• Wenn Sie die .vue-Datei nicht analysieren und die Objektsyntax der Komponentenoption von vue nicht verwenden müssen, müssen Sie keinen zusätzlichen Vue-Loader konfigurieren.

Zusammenfassend

• wird empfohlen, beim Testen kein React zu verwenden. Verwenden Sie ein React-Projekt, das webpack.config.js von Grund auf konfiguriert,

• wenn Sie die .vue-Datei nicht analysieren und Vues direkt verwenden müssen Komponentenoptionsobjektsyntax, dann ist keine zusätzliche Konfiguration des Vue-Loaders erforderlich.

Zum Vergleich werden die React-Komponenten des Vue-Projekts in React-Projekten und die Vue-Komponenten in React-Projekten verwendet.

Dieser Artikel wurde reproduziert von: https://juejin.cn/post/7083303446161391623

Autor: bigtree