查看原文
其他

一个 OpenTiny,支持Vue2、Vue3

Kagol 前端早读课 2023-05-10

前言

华为云的一款企业级设计体系。本文由 @✘✘✘投稿分享。

正文从这开始~~

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 官网:https://opentiny.design/

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

Vue 组件库:https://github.com/opentiny/tiny-vue

Angular 组件库:https://github.com/opentiny/ng

CLI 工具:https://github.com/opentiny/tiny-cli

其他作品推荐

基于 Vue3 的可视化编辑器 Everright-formEditor 开源

He3 开发工具箱 - 400+ 免费的小工具合集

ChatGPT to Help:从此告别 Copy & Paste,多个 tabs 之间无缝畅聊

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存