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

Comment exécuter les composants

vue dans le projet react ? L'article suivant vous présentera la méthode d'exécution des composants vue dans les projets React à travers des exemples. J'espère qu'il vous sera utile !

Le contexte de cet article vient d'une interview. On m'a demandé : Si les composants vue et React doivent interopérer et réutiliser, comment peuvent-ils être implémentés avec élégance ?

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

• Option 1 : Conversion mutuelle du code vue et du code React (synchronisation de la bibliothèque de composants)

• Option 2 : Laisser directement le composant vue s'exécuter dans le projet React, et vice-versa vers peut.

[Recommandations associées : Tutoriel vidéo Redis, Tutoriel vuejs]

Voyons d'abord l'effet d'implémentation

Le composant vue a été rendu normalement en réalité, et j'ai aussi cliqué Après avoir appuyé 3 fois sur le bouton, la réponse et le rendu de vue sont également normaux

Comment l'implémenter spécifiquement ?

Principe d'implémentation

• Introduire la version complète de vue (si vous tenez compte des performances, vous pouvez l'introduire à la demande)

• Attendez l'étape ComponentDidMount et montez <div id="vueApp"></div>Après <div id="vueApp"></div>后

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

注意：

如果只需支持vue的组件选项对象的话，那么不用配置webpack，就完了

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

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

高级版

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

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

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

dans 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')
  }

  ...
}

Remarque :

si vous avez uniquement besoin de prendre en charge l'objet d'option de composant de vue, alors vous n'avez pas besoin de configurer webpack

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

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

  . Version avancée

  cela La version avancée fait référence à : Besoin 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 le démo ci-dessus et changez quelques lignes)

  Changé pour importer des fichiers .vue : import Foo from "./Foo.vue";
  rrreee

  • Pour prendre effet à ce moment, vous devez pour configurer vue-loader

  Site officiel : https://vue-loader.vuejs.org/guide/#manual-setup

  rrreee

  • Notes

  • Il est recommandé lors des tests , n'utilisez pas de projets d'échafaudage React

    , utilisez scratch Configuration du projet React de webpack.config.js
  Lorsque j'utilise actuellement la dernière version d'échafaudage, après avoir exécuté eject, j'obtiendrai une erreur lors de l'écriture webpack.config.js car VueLoaderPlugin n'est pas compatible avec la syntaxe de oneOfSi vous n'avez pas besoin d'analyser le fichier .vue et d'utiliser directement la syntaxe de l'objet d'option de composant de vue, alors il n'est pas nécessaire de configurer vue -loader en plusRésuméDois-je configurer le chargeur de webpack.config.js ?

  	Il est recommandé de ne pas utiliser React lors du test d'un projet échafaudé, en utilisant un projet React qui configure webpack.config.js à partir de zéroSi vous ne le faites pas 'pas besoin d'analyser le fichier .vue et d'utiliser directement la syntaxe de l'objet d'option de composant de vue, alors il n'est pas nécessaire de configurer vue-loader
  	Enfin, comparons la différence de configuration entre l'utilisation de composants React dans les projets Vue et utiliser les composants vue dans les projets React !

  Lorsque vous utilisez des composants React dans des projets Vue

  oui

  , vous devez configurer babel-loader,

  compiler les fichiers .jsx🎜, et vous devez accorder une attention particulière aux options de babel-loader 🎜🎜🎜🎜 in React Le composant vue 🎜🎜🎜no🎜 est utilisé dans le projet. Si vous n'avez pas besoin d'analyser le fichier .vue et d'utiliser directement la syntaxe 🎜component option object🎜 de vue, alors aucune configuration supplémentaire n'est nécessaire. 🎜vue-loader🎜. Si vous devez prendre en charge les fichiers .vue🎜, vous devez configurer vue-loader🎜🎜🎜🎜🎜🎜Cet article est reproduit à partir de : https://juejin.cn/post/7083303446161391623🎜🎜Auteur : bigtree🎜🎜🎜Pour en savoir plus connaissances liées à la programmation, veuillez visiter : 🎜Vidéos de programmation🎜 ! ! 🎜

  Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!