Comment exécuter des composants vue dans un projet React ? Présentation de la méthode

Comment démarrer rapidement avec VUE3.0 : le contexte de l'apprentissage

de cet article est issu d'une interview. On m'a demandé si les composants Vue et React devaient interopérer et réutiliser, comment l'implémenter avec élégance ?

Sauf que les développeurs transfèrent manuellement le code. Actuellement, je ne peux penser qu'à deux solutions.

• Solution 1 : convertir le code vue et le code de réaction (synchronisation de la bibliothèque de composants)

• Solution 2 : laisser directement les composants vue s'exécuter dans le projet React, et vice versa.

Regardons d'abord la mise en œuvre

Le composant vue a été rendu normalement dans React et j'ai également cliqué 3 fois sur le bouton .La réponse et le rendu de vue étaient également normaux.Comment

y parvenir ?

Le principe d'implémentation est

• d'introduire la version complète de vue (si vous considérez les performances, vous pouvez l'introduire à la demande),

• d'attendre l'étape composantDidMount, de monter <div id="vueApp" /> puis

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

importer Vue depuis 'vue/dist/vue.min.js' //Introduire la version complète, sinon la syntaxe de l'objet composant de vue ne peut pas être analysée. exporter la classe par défaut App extends Component {
  constructeur (accessoires) {
    super (accessoires)
  }
  
  composantDidMount() {
    const Foo = {
      modèle : `
        <div>
          <h1>Je suis vue : {{aaa}}</h1>
          <h1>Je suis vue : {{aaa}}</h1>
          <h1>Je suis vue : {{aaa}}</h1>
          <button @click="aaa++">Bouton</button>
        </div>
      ',
      données () {
        retour {
          aaa : 2222
        }
      }
    }
    nouvelleVue({
      rendu : h => h(Foo),
    }).$mount('#vueApp')
  }

  rendre() {
    retour (
      <div>
        <h1>Actuellement dans le projet React</h1>
        <h1>Actuellement dans le projet React</h1>
        Ce qui suit rendra le composant vue <div id="vueApp" />
      </div>
    )
  }
}

Remarque :

Si vous avez uniquement besoin de prendre en charge l'objet d'option de composant de Vue, vous n'avez pas besoin de configurer le webpack.

L'objet d'option de composant de Vue fait référence à :

const Foo = {. 
    modèle : ` 
        <div> 
            <h1>Je suis vue : {{aaa}}</h1>
            <h1>Je suis vue : {{aaa}}</h1> 
            <h1>Je suis vue : {{aaa}}</h1> 
            <button @click="aaa++">Bouton</button> 
        </div> 
    ', 
    données () { 
        retour { 
            aaa : 2222 
        } 
    } 
}

Version avancée La

version avancée fait ici référence à : la nécessité de prendre en charge les fichiers/composants .vue (la démo ci-dessus est directement l'objet d'option du composant, il n'y a pas de fichier .vue

Par exemple : (continuez à utiliser la démo ci-dessus et modifiez un)

quelques lignes)

• pour importer le fichier .vue : import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' // Introduisez la version complète, sinon la syntaxe des objets composants de vue ne peut pas être analysée. Foo de "./ Foo.vue" ;
exporter la classe par défaut App étend le composant {
  ...
  
  composantDidMount() {
    nouvelleVue({
      rendu : h => h(Foo),
    }).$mount('#vueApp')
  }

  ...
}

Pour que cela prenne effet, vous devez configurer le

• site officiel de vue-loader : https://vue-loader.vuejs.org/guide/#manual-setup

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

module.exports = {
  mode : 'développement',
  module : {
    règles: [
      {
        test : /.vue$/,
        chargeur : 'vue-loader'
      }
    ]
  },
  plugins : [
    // assurez-vous d'inclure le plugin pour la magie
    nouveau VueLoaderPlugin()
  ]
}

Remarque :

• il est recommandé lors des tests de ne pas utiliser de projets d'échafaudage de réaction , mais d'utiliser des projets de réaction qui configurent webpack.config.js à partir de zéro.

• Lorsque j'utilise la dernière version d'échafaudage, après avoir exécuté l'éjection, accédez à webpack.config. js L'écriture dedans signalera une erreur car VueLoaderPlugin n'est pas compatible avec une syntaxe oneOf.

• Si vous n'avez pas besoin d'analyser le fichier .vue et d'utiliser directement la syntaxe d'objet d'option de composant de vue, il n'est pas nécessaire de configurer un chargeur de vue supplémentaire.

En résumé,

• il est recommandé de ne pas utiliser React lors des tests. Pour un projet échafaudé , utilisez un projet React qui configure webpack.config.js à partir de zéro

• si vous n'avez pas besoin d'analyser le fichier .vue et d'utiliser directement celui de vue. syntaxe de l'objet d'option de composant, alors il n'y a pas besoin de configuration supplémentaire de vue-loader.

Enfin, à titre de comparaison, les composants React du projet vue sont utilisés dans les projets React, et les composants vue sont utilisés dans les projets React.

Cet article est reproduit à partir de : https://juejin.cn/post/7083303446161391623

Auteur : bigtree.