Heim > Artikel > Web-Frontend > 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 vonWie 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
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>我是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('#vueApp') } render() { return ( <div> <h1>当前是react项目内</h1> <h1>当前是react项目内</h1> 以下将渲染vue组件 <div id="vueApp" /> </div> ) } }
Hinweis:
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 } } }
Erweiterte Version<div id="vueApp"></div>
后
在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,改几行)
import Foo from "./Foo.vue";
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)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!
und jsx-Dateien kompilieren konfigurieren und den Optionen von babel-loader besondere Aufmerksamkeit schenken
in Reaktion Die Vue-Komponente
Neinvon 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:
ProgrammiervideosDas 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!