Veaury 开源项目教程
项目介绍
Veaury 是一个基于 Vue 和 React 框架构建的工具库,旨在支持在同一个应用中同时使用 Vue 和 React。它适用于以下场景:
- 在一个应用中同时使用 Vue 和 React。
- 从 React 迁移到 Vue 或从 Vue 迁移到 React。
- 使用第三方 Vue 和 React 组件,如 antd、element-ui、vuetify 等。
Veaury 的主要特性包括:
- 支持 Vue 3。
- 支持上下文共享,所有 Vue 和 React 组件可以共享上下文。
- 支持跨框架使用 hooks,例如在 Vue 组件中使用 React 的 hooks。
项目快速启动
安装
首先,通过 npm 或 yarn 安装 Veaury:
npm install veaury
或
yarn add veaury
基本使用
以下是一个简单的示例,展示如何在 React 项目中使用 Vue 组件:
import React from 'react';
import { applyVueInReact } from 'veaury';
import BasicVue from './BasicVue.vue';
const Basic = applyVueInReact(BasicVue);
function App() {
return (
<div>
<h1>React 项目中的 Vue 组件</h1>
<Basic />
</div>
);
}
export default App;
应用案例和最佳实践
案例一:在 React 项目中使用 Vue 组件
假设我们有一个 Vue 组件 BasicVue.vue
,我们希望在 React 项目中使用它:
<template>
<div>
<h2>这是一个 Vue 组件</h2>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello from Vue!'
};
}
}
</script>
在 React 项目中使用该 Vue 组件:
import React from 'react';
import { applyVueInReact } from 'veaury';
import BasicVue from './BasicVue.vue';
const Basic = applyVueInReact(BasicVue);
function App() {
return (
<div>
<h1>React 项目中的 Vue 组件</h1>
<Basic />
</div>
);
}
export default App;
案例二:在 Vue 项目中使用 React 组件
假设我们有一个 React 组件 BasicReact.js
,我们希望在 Vue 项目中使用它:
import React from 'react';
function BasicReact() {
return (
<div>
<h2>这是一个 React 组件</h2>
<p>Hello from React!</p>
</div>
);
}
export default BasicReact;
在 Vue 项目中使用该 React 组件:
<template>
<div>
<h1>Vue 项目中的 React 组件</h1>
<BasicReact />
</div>
</template>
<script>
import { applyReactInVue } from 'veaury';
import BasicReact from './BasicReact.js';
const BasicReactComponent = applyReactInVue(BasicReact);
export default {
components: {
BasicReact: BasicReactComponent
}
}
</script>
典型生态项目
生态项目一:antd
antd 是一个流行的 React UI 库,通过 Veaury,我们可以在 Vue 项目中使用 antd 组件:
<template>
<div>
<h1>Vue 项目中的 antd 组件</h1>
<Button type="primary">Primary Button</Button>
</div>
</template>
<script>
import { applyReactInVue } from 'veaury';
import { Button } from 'antd';
const AntdButton = applyReactInVue(Button);
export default {
components: {
Button: AntdButton