一个 OpenTiny，支持Vue2、Vue3
前言
华为云的一款企业级设计体系。本文由 @✘✘✘投稿分享。
正文从这开始～～
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
其他作品推荐