你有没有在一个应用中同时开发 Vue 和 React?
或者有没有遇到从Vue项目迁移到React项目,或者从React项目迁移到Vue项目的需求呢?
再或者,想要在一个应用中可以随意使用React或者Vue的第三方组件?
今天,介绍的这款牛逼的工具库就可以满足你上述的这些需求和场景!
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/