React和Vue技术栈融合使用？这个工具太牛逼了！
你有没有在一个应用中同时开发 Vue 和 React？
或者有没有遇到从Vue项目迁移到React项目，或者从React项目迁移到Vue项目的需求呢？
再或者，想要在一个应用中可以随意使用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'
// >= veaury@2.1.1
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'
// >= veaury@2.1.1
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/
腾讯云开发者
