React和Vue技術棧融合使用？這個工具太牛逼了！

Veaury

Veaury 是基于 React 和 Vue3 的工具庫，主要用于 React 和 Vue 在一個項目中公共使用的場景，主要運用在項目遷移、技術棧融合的開發模式、跨技術棧使用第三方元件的場景。

功能介紹

Veaury 目前支援Vue3，如果你想要完美支援react和vue2同時開發那麼可以看下/vuereact-combined這個工具庫。

Veaury支援 Context - 同一個應用中出現的vue元件和react元件的context是共享的。

Veaury 支援跨架構的 hooks 調用。可以在react元件中使用vue的hooks，也可以在vue元件中使用react的hooks。

安裝使用

# 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，将plugins中 vue()、vueJsx()注釋，并将 veauryVitePlugins - type 設定為vue，表示所有在react_app目錄中的檔案的jsx将被react jsx編譯，其他檔案裡的jsx将以vue jsx編譯

import { defineConfig } from 'vite'
// >= [email protected]
import veauryVitePlugins from 'veaury/vite/index.js'

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

主項目是React，将plugins中 react()注釋，并将 veauryVitePlugins - type 設定為react

import { defineConfig } from 'vite'
// >= [email protected]
import veauryVitePlugins from 'veaury/vite/index.js'

export default defineConfig({
  plugins: [
    // 關閉 react 插件
    // react(),
    // type設為react時，所有.vue檔案裡的jsx将以vue jsx進行編譯，其他檔案的jsx都是以react jsx編譯
    veauryVitePlugins({
      type: 'react'
    })
  ]
})

           

如何使用？

在React元件中使用Vue元件 - 基本用法

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

在Vue元件中使用React元件 - 基本用法

<template>
  <BasicPure :foo="foo">
    <div>
      children内容
    </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/