Как запустить компоненты Vue в проекте реагирования? Введение метода

Как быстро начать работу с VUE3.0: Основой изучения

этой статьи послужило интервью. Меня спросили: если компоненты vue и React должны взаимодействовать и повторно использоваться, как это элегантно реализовать?

Разве что разработчики вручную переносят код. В настоящее время я могу придумать только два решения.

• Решение 1. Преобразовать код vue и код реакции (синхронизация библиотеки компонентов).

• Решение 2. Запустить компоненты vue напрямую в проекте React и наоборот.

Давайте сначала посмотрим на реализацию

Компонент vue нормально отрисовывался в реакции, и я также нажимал кнопку 3 раза . Ответ и рендеринг vue также были нормальными .

Как этого добиться?

Принцип реализации заключается в том,

• чтобы представить полную версию vue (если вы учитываете производительность, вы можете представить ее по требованию)

• , дождаться этапа компонентаDidMount, смонтировать <div id="vueApp" /> и затем

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

import Vue from 'vue/dist/vue.min.js' //Представьте полную версию, иначе синтаксис объекта компонента vue не может быть проанализирован. Export class по умолчанию App расширяет компонент {
  конструктор (реквизит) {
    супер(реквизит)
  }
  
  компонентДидМаунт () {
    константа Foo = {
      шаблон: `
        <дел>
          <h1>Я vue: {{aaa}}</h1>
          <h1>Я vue: {{aaa}}</h1>
          <h1>Я vue: {{aaa}}</h1>
          <button @click="aaa++">Кнопка</button>
        </div>
      `,
      данные () {
        возвращаться {
          ааа: 2222
        }
      }
    }
    newVue({
      рендеринг: h => h(Foo),
    }).$mount('#vueApp')
  }

  оказывать() {
    возвращаться (
      <дел>
        <h1>В настоящее время в проекте реагирования</h1>
        <h1>В настоящее время в проекте реагирования</h1>
        Следующее отобразит компонент vue <div id="vueApp" />
      </div>
    )
  }
}

Примечание.

Если вам нужно поддерживать только объект параметра компонента Vue, вам не нужно настраивать

объект параметра компонента Vue:

const Foo = {

 
    шаблон: ` 
        <дел> 
            <h1>Я vue: {{aaa}}</h1>
            <h1>Я vue: {{aaa}}</h1> 
            <h1>Я vue: {{aaa}}</h1> 
            <button @click="aaa++">Кнопка</button> 
        </div> 
    `, 
    данные () { 
        возвращаться { 
            ааа: 2222 
        } 
    } 
}

Расширенная версия

. Расширенная версия здесь означает: необходимость поддержки файлов/компонентов .vue (приведенная выше демонстрация является непосредственно объектом параметра компонента, файла .vue нет.

Например: (продолжите использовать приведенную выше демонстрацию и измените файл)

несколько строк)

• для импорта файла .vue: import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' //Представьте полную версию, иначе синтаксис объекта компонента vue не может быть проанализирован import Foo из "./ Foo.vue";
экспортировать класс по умолчанию App расширяет компонент {
  ...
  
  компонентДидМаунт () {
    newVue({
      рендеринг: h => h(Foo),
    }).$mount('#vueApp')
  }

  ...
}

Чтобы это вступило в силу, вам необходимо настроить

• официальный сайт vue-loader: https://vue-loader.vuejs.org/guide/#manual-setup

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

модуль.экспорт = {
  режим: «развитие»,
  модуль: {
    правила: [
      {
        тест: /.vue$/,
        загрузчик: 'vue-загрузчик'
      }
    ]
  },
  плагины: [
    // обязательно подключите плагин для магии
    новый плагин VueLoader()
  ]
}

Примечание.

• При тестировании рекомендуется не использовать проекты реагирования , а использовать проекты реагирования, которые настраивают webpack.config.js с нуля.

• Когда я использую последнюю версию scaffolding, после запуска eject перейдите к webpack.config. js, при записи в него будет сообщаться об ошибке, поскольку VueLoaderPlugin не совместим с синтаксисом oneOf.

• Если вам не нужно анализировать файл .vue и напрямую использовать синтаксис объекта параметров компонента vue, то нет необходимости настраивать дополнительный vue-loader.

Таким образом,

• рекомендуется не использовать реакцию при тестировании. Для проекта со скаффолдом используйте проект реагирования, который настраивает webpack.config.js с нуля.

• Если вам не нужно анализировать файл .vue и напрямую использовать vue. синтаксис объекта параметра компонента, то нет необходимости в дополнительной настройке vue-loader.

Наконец, для сравнения: компоненты React проекта vue используются в проектах реагирования, а компоненты vue используются в проектах реагирования. Разница в конфигурации!

Эта статья воспроизведена по адресу: https://juejin.cn/post/7083303446161391623

Автор: bigtree.