
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

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 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)
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
// 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.
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.
| Muss ich den Loader von webpack.config.js konfigurieren? | |
|---|---|
| Verwendung der Vue-Komponente in einem React- | Projekt |
| müssen | Sie besonders darauf achten |
| Wenn Sie die .vue-Datei nicht analysieren müssen, verwenden Sie vue direkt. Wenn die Objektsyntax der Komponentenoption verwendet wird, ist keine zusätzliche Konfiguration des vue-Loaders erforderlich. Wenn Sie .vue-Dateien unterstützen müssen, müssen Sie den Vue-Loader konfigurieren. |
Dieser Artikel wurde reproduziert von: https://juejin.cn/post/7083303446161391623
Autor: bigtree