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：

1. npm install veaury

复制代码

或

1. yarn add veaury

复制代码

根本使用

以下是一个简朴的示例，展示怎样在 React 项目中使用 Vue 组件：

1. import React from 'react';
2. import { applyVueInReact } from 'veaury';
3. import BasicVue from './BasicVue.vue';
5. const Basic = applyVueInReact(BasicVue);
7. function App() {
8.   return (
9.     <div>
10.       <h1>React 项目中的 Vue 组件</h1>
11.       <Basic />
12.     </div>
13.   );
14. }
16. export default App;

复制代码

应用案例和最佳实践

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

假设我们有一个 Vue 组件 BasicVue.vue，我们盼望在 React 项目中使用它：

1. <template>
2.   <div>
3.     <h2>这是一个 Vue 组件</h2>
4.     <p>{{ message }}</p>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   data() {
11.     return {
12.       message: 'Hello from Vue!'
13.     };
14.   }
15. }
16. </script>

复制代码

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

1. import React from 'react';
2. import { applyVueInReact } from 'veaury';
3. import BasicVue from './BasicVue.vue';
5. const Basic = applyVueInReact(BasicVue);
7. function App() {
8.   return (
9.     <div>
10.       <h1>React 项目中的 Vue 组件</h1>
11.       <Basic />
12.     </div>
13.   );
14. }
16. export default App;

复制代码

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

假设我们有一个 React 组件 BasicReact.js，我们盼望在 Vue 项目中使用它：

1. import React from 'react';
3. function BasicReact() {
4.   return (
5.     <div>
6.       <h2>这是一个 React 组件</h2>
7.       <p>Hello from React!</p>
8.     </div>
9.   );
10. }
12. export default BasicReact;

复制代码

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

1. <template>
2.   <div>
3.     <h1>Vue 项目中的 React 组件</h1>
4.     <BasicReact />
5.   </div>
6. </template>
8. <script>
9. import { applyReactInVue } from 'veaury';
10. import BasicReact from './BasicReact.js';
12. const BasicReactComponent = applyReactInVue(BasicReact);
14. export default {
15.   components: {
16.     BasicReact: BasicReactComponent
17.   }
18. }
19. </script>

复制代码

典范生态项目

生态项目一：antd

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

1. <template>
2.   <div>
3.     <h1>Vue 项目中的 antd 组件</h1>
4.     <Button type="primary">Primary Button</Button>
5.   </div>
6. </template>
8. <script>
9. import { applyReactInVue } from 'veaury';
10. import { Button } from 'antd';
12. const AntdButton = applyReactInVue(Button);
14. export default {
15.   components: {
16.     Button: AntdButton

复制代码

veauryUse React in Vue3 and Vue3 in React, And as perfect as possible!项目地址:https://gitcode.com/gh_mirrors/ve/veaury

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。