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,那么可以通过这里的配置文档解决：

如果项目是通过 vite 构建的，

主项目是Vue，将plugins中 vue()、vueJsx()注释，并将 veauryVitePlugins - type 设置为vue，表示所有在react_app目录中的文件的jsx将被react jsx编译，其他文件里的jsx将以vue jsx编译

import { defineConfig } from 'vite'// >= veaury@2.1.1import 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'// >= veaury@2.1.1import 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 componentimport 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地址：