一個 OpenTiny，Vue2 Vue3 都支援！

Kagol發表於2023-04-07
Vue

大家好，我是 Kagol，OpenTiny 開源社群運營，TinyVue 跨端、跨框架元件庫核心貢獻者，專注於前端元件庫建設和開源社群運營。

今天給大家介紹如何同時在 Vue2 和 Vue3 專案中使用 TinyVue。

TinyVue 是一套跨端、跨框架的企業級 UI 元件庫，支援 Vue 2 和 Vue 3，支援 PC 端和移動端。

? 特性：

  • ? 包含 80 多個簡潔、易用、功能強大的元件
  • ? 一套程式碼同時支援 Vue 2 和 Vue 3
  • ?️ 一套程式碼同時支援 PC 端和移動端
  • ? 支援國際化
  • ? 支援主題定製
  • ? 元件內部支援配置式開發，可支援低程式碼平臺視覺化元件配置
  • ? 採用模板、樣式、邏輯分離的跨端、跨框架架構，保障靈活性和可移植性

image.png

在 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/

效果如下

image.png

安裝和使用 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>

效果如下

image.png

在 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

效果如下

image.png

安裝和使用 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>

效果如下

image.png

總結

可以看到在 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 ?）

相關文章