大家好，我是 Kagol， OpenTiny 开源社区运营， TinyVue 跨端、跨框架组件库核心贡献者，专注于前端组件库建设和开源社区运营.

今天给大家介绍如何同时在 Vue2 和 Vue3 项目中使用 TinyVue .

TinyVue 是一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端.

🌈 特性:

• 📦 包含 80 多个简洁、易用、功能强大的组件
• 🖖 一套代码同时支持 Vue 2 和 Vue 3
• 🖥️ 一套代码同时支持 PC 端和移动端
• 🌍 支持国际化
• 🎨 支持主题定制
• 📊 组件内部支持配置式开发，可支持低代码平台可视化组件配置
• 💡 采用模板、样式、逻辑分离的跨端、跨框架架构，保障灵活性和可移植性

在 Vue2 项目中使用

创建 Vue2 项目

先用 Vue CLI 创建一个 Vue2 项目.

                        
                          // 安装 Vue CLI
npm install -g @vue/cli

// 创建 Vue2 项目
vue create vue2-demo

                        
                      

输出以下信息说明项目创建成功 。

                        
                          🎉  Successfully created project vue2-demo.
👉  Get started with the following commands:

 $ cd vue2-demo
 $ yarn serve

                        
                      

创建好之后可以执行以下命令启动项目 。

                        
                          yarn serve

                        
                      

输出以下命令说明启动成功 。

                        
                            App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.102:8080/

                        
                      

效果如下 。

安装和使用 TinyVue

安装 TinyVue 。

                        
                          npm i @opentiny/vue@2

                        
                      

在 src/views/Home.vue 中使用 TinyVue 组件 。

                        
                          <template>
  <div class="home">
    <!-- 3. 使用 TinyVue 组件 -->
    <Button>OpenTiny</Button>
    <Alert description="Hello OpenTiny"></Alert>
  </div>
</template>

<script lang="ts">
// 1. 引入 TinyVue 组件
import { Button, Alert } from '@opentiny/vue'

@Component({
  components: {
    // 2. 注册 TinyVue 组件
    Button, Alert
  },
})
</script>

                        
                      

效果如下 。

在 Vue3 项目中使用

创建 Vue3 项目

使用 Vite 创建一个 Vue3 项目 。

                        
                          npm create vite vue3-demo

                        
                      

输出以下信息说明项目创建成功 。

                        
                          Done. Now run:

  cd vue3-demo
  npm install
  npm run dev

                        
                      

创建好之后可以执行以下命令启动项目 。

                        
                          npm i
npm run dev

                        
                      

输出以下命令说明启动成功 。

                        
                            VITE v3.2.5  ready in 391 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

                        
                      

效果如下 。

安装和使用 TinyVue

安装 TinyVue 。

                        
                          npm i @opentiny/vue@3

                        
                      

在 src/App.vue 中使用 TinyVue 组件 。

                        
                          <script setup lang="ts">
// 1. 引入 TinyVue 组件
import { Button, Alert } from '@opentiny/vue'
</script>
<template>
  <!-- 2. 使用 TinyVue 组件 -->
  <Button>OpenTiny</Button>
  <Alert description="Hello OpenTiny"></Alert>
</template>

                        
                      

效果如下 。

总结

可以看到在 Vue2 和 Vue3 项目中组件的使用方式完全一样，这也就意味着，使用 TinyVue 的 Vue2 项目可以无缝迁移到 Vue3 项目中.

• 无需修改 API
• 无需担心组件功能不一致
• 无需担心业务出现不连续

更多 TinyVue 组件，欢迎体验： https://opentiny.design/tiny-vue 。

联系我们

如果你对我们 OpenTiny 的开源项目感兴趣，欢迎添加小助手微信：opentiny-official，拉你进群，一起交流前端技术，一起玩开源.

OpenTiny 官网： https://opentiny.design/ 。

OpenTiny 仓库： https://github.com/opentiny/ 。

Vue 组件库： https://github.com/opentiny/tiny-vue （欢迎 Star 🌟） 。

Angular 组件库： https://github.com/opentiny/ng （欢迎 Star 🌟） 。

CLI 工具： https://github.com/opentiny/tiny-cli （欢迎 Star 🌟） 。

最后此篇关于一个OpenTiny，Vue2Vue3都支持！的文章就讲到这里了,如果你想了解更多关于一个OpenTiny，Vue2Vue3都支持！的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。