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