Вы когда-нибудь разрабатывали Vue и React в одном приложении?

Или вы когда-нибудь сталкивались с необходимостью перехода с проекта Vue на проект React или с проекта React на проект Vue?

Или вы хотите иметь возможность использовать в приложении сторонние компоненты React или Vue?

Сегодня представленная потрясающая библиотека инструментов может удовлетворить ваши вышеуказанные потребности и сценарии!

Veaury

Veaury основан на React и Vue3 Библиотека инструментов, в основном используется для React и Vue Сценарии общедоступного использования в проекте в основном используются при миграции проекта, моделях разработки интеграции стеков технологий и сценариях, в которых сторонние компоненты используются в стеках технологий.

Введение функции

Veaury В настоящее время поддерживает Vue3,Если вам нужна идеальная поддержкаreactиvue2в то же времяразвивать Тогда вы можете взглянуть/vuereact-combinedэтотинструмент Библиотека。

Veaury支持 Context - Контекст компонентов Vue и компонентов React, появляющихся в одном приложении, является общим.

Veaury Поддержка кросс-фреймворка hooks вызов. Вы можете использовать хуки Vue в компонентах реагирования, а также можете использовать хуки реагирования в компонентах Vue.

Установите и используйте

# Install with yarn:
$ yarn add veaury
# or with npm:
$ npm i veaury -S

Предварительная конфигурация проекта

Если вы хотите конвертировать React или Vue Компоненты из npm Сумка,или был построен,Затем вы можете использовать его напрямуюapplyPureReactInVue или applyVueInReact;如果需要在一个项目中в то же времяразвивать Vue и React, вам может потребоваться выполнить следующую конфигурацию.

Если вы используете Webpack Проект построен,Я хочу, чтобы проект vue поддерживал разработкуreact,или ВОЗreactПоддержка проектаразвиватьvue,Тогда это можно решить через документ Конфигурация здесь:

https://github.com/devilwjp/veaury/tree/master/dev-project-vue3

https://github.com/devilwjp/veaury/tree/master/dev-project-react

Если проект собран через vite,

Основной проект — Vue, который будет включен в плагины. vue()、vueJsx()Комментарий,и будет veauryVitePlugins - type установлен наvue,значит все вreact_appфайлов в каталогеjsxбудетreact jsxкомпилировать,в других файлахjsxбудетvue jsxкомпилировать

import { defineConfig } from 'vite'
// >= veaury@2.1.1
import veauryVitePlugins from 'veaury/vite/index.js'

export default defineConfig({
  plugins: [
    // vue(),
    // vueJsx(),
    veauryVitePlugins({
      type: 'vue'
    })
  ]
})

Основной проект — React, который будет включен в плагины. react()Комментарий,и будет veauryVitePlugins - type установлен наreact

import { defineConfig } from 'vite'
// >= veaury@2.1.1
import veauryVitePlugins from 'veaury/vite/index.js'

export default defineConfig({
  plugins: [
    // закрытие react плагин
    // react(),
    // Если тип настроен на реакцию, jsx во всех файлах .vue будет vue. jsx скомпилирован, а jsx других файлов находится в реакции jsx-компиляция
    veauryVitePlugins({
      type: 'react'
    })
  ]
})

Как использовать?

Использование компонентов Vue в компонентах React – базовое использование

import {applyVueInReact, applyPureVueInReact} from 'veaury'
// This is a Vue component
import BasicVueComponent from './Basic.vue'
import {useState} from 'react'
// Use HOC 'applyVueInReact'
const BasicWithNormal = applyVueInReact(BasicVueComponent)
// Use HOC 'applyPureVueInReact'
const BasicWithPure = applyPureVueInReact(BasicVueComponent)
export default function () {
  const [foo] = useState('Hello!')
  return <>
    <BasicWithNormal foo={foo}>
      <div>
        the default slot
      </div>
    </BasicWithNormal>
    <BasicWithPure foo={foo}>
      <div>
        the default slot
      </div>
    </BasicWithPure>
  </>
}

Использование компонентов React в компонентах Vue – базовое использование

<template>
  <BasicPure :foo="foo">
    <div>
      детский контент
    </div>
  </BasicPure>
</template>
<script>
import {applyReactInVue, applyPureReactInVue} from 'veaury'
// Это компонент React
import BasicReactComponent from './react_app/Basic.jsx'
import {ref} from 'vue'

export default {
  components: {
    // Используйте компоненты более высокого порядка 'applyReactInVue'
    Basic: applyReactInVue(BasicReactComponent),
    // Теперь рекомендуется использовать чистый режим. 'applyPureReactInVue'
    BasicPure: applyPureReactInVue(BasicReactComponent)
  },
  setup() {
    return {
      foo: ref('Hello!')
    }
  }
}
</script>

Здесь мы представляем простое использование Veaury. Для получения подробной информации об использовании перейдите на официальный сайт. Если у вас есть такие потребности, эта библиотека инструментов — лучший выбор ~.

Адрес Github: https://github.com/devilwjp/veaury/