Veaury 开源项目教程

Veaury 开源项目教程

veauryUse React in Vue3 and Vue3 in React, And as perfect as possible!项目地址:https://gitcode.com/gh_mirrors/ve/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 (
    

React 项目中的 Vue 组件

); } export default App;

应用案例和最佳实践

案例一:在 React 项目中使用 Vue 组件

假设我们有一个 Vue 组件 BasicVue.vue,我们希望在 React 项目中使用它:




在 React 项目中使用该 Vue 组件:

import React from 'react';
import { applyVueInReact } from 'veaury';
import BasicVue from './BasicVue.vue';

const Basic = applyVueInReact(BasicVue);

function App() {
  return (
    

React 项目中的 Vue 组件

); } export default App;

案例二:在 Vue 项目中使用 React 组件

假设我们有一个 React 组件 BasicReact.js,我们希望在 Vue 项目中使用它:

import React from 'react';

function BasicReact() {
  return (
    

这是一个 React 组件

Hello from React!

); } export default BasicReact;

在 Vue 项目中使用该 React 组件:




典型生态项目

生态项目一:antd

antd 是一个流行的 React UI 库,通过 Veaury,我们可以在 Vue 项目中使用 antd 组件:




                    
                    

你可能感兴趣的:(Veaury 开源项目教程)