1. 介紹

Vue是一款十分受歡迎的前端框架，和React、Angular合在一起被稱為前端三大框架，尤其是國內(nèi)，大大小小的團(tuán)隊(duì)都在使用Vue開發(fā)他們的頁面。提到前端開發(fā)就不得不提UI組件庫，UI組件庫幫我們寫好了搭建一個(gè)頁面需要的基本元素，例如按鈕、表單、表格、菜單、導(dǎo)航、彈窗等等。然后我們就可以根據(jù)自己的業(yè)務(wù)需要，像搭積木一樣使用組件庫搭建出自己的頁面。

最近聽說了一個(gè)新的開源項(xiàng)目Opentiny，它是華為云的前端團(tuán)隊(duì)貢獻(xiàn)的一套組件庫系統(tǒng)，包含了適用于Vue技術(shù)棧的TinyVue組件庫，和適用于Angular技術(shù)棧的TinyNg組件庫。目前華為云的控制臺(tái)頁面就是使用Opentiny搭建，這是一套經(jīng)歷了實(shí)際業(yè)務(wù)考驗(yàn)的組件庫，如果我們也想搭建向華為云控制臺(tái)一樣的頁面，不放也可以試試這套Opentiny組件庫。

鑒于國內(nèi)大部分的前端開發(fā)者都是以Vue學(xué)習(xí)為主，所以今天我們就上手試試TinyVue，看看怎么樣。

2. 官網(wǎng)和文檔

上手一款組件庫，最直接的方法就是去它的官網(wǎng)，一個(gè)合格的官網(wǎng)會(huì)直接告訴我們?nèi)绾卧谖覀兊捻?xiàng)目中安裝他們的組件庫，如何引入和使用。此外還有每個(gè)組件的使用示例和詳細(xì)的API文檔。

TinyVue的官網(wǎng)地址如下：

https://opentiny.design/tiny-vue/zh-CN/os-theme/docs/envpreparation

3. 使用TinyVue組件庫

3.1 創(chuàng)建Vue項(xiàng)目

現(xiàn)在我們手里有了TinyVue的文檔，下面就可以試試使用它了。首先我們創(chuàng)建一個(gè)Vue項(xiàng)目

npm init vue

進(jìn)入項(xiàng)目目錄，然后安裝依賴

cd tiny-vue-test npm install

3.2 安裝TinyVue

首先安裝TinyVue包，TinyVue支持vue2和vue3，根據(jù)我們的項(xiàng)目需要選擇對(duì)應(yīng)的版本，這里使用vue3，所以安裝@opentiny/vue@3，命令如下

npm install @opentiny/vue@3 -S

安裝完成后使用IDE打開項(xiàng)目，這里我是用Vscode，執(zhí)行如下命令

code .

如圖，打開package.json可以看到我們的依賴和命令

在使用TinyVue之前需要做一些準(zhǔn)備工作，打開vite.config.ts，添加如下代碼

3.3 使用TinyVue組件

我們用TinyVue搭一個(gè)簡(jiǎn)單的表單

首先進(jìn)入src，刪除src下面的所有內(nèi)容，然后創(chuàng)建一個(gè)main.ts和App.vue

main.ts

App.vue

3.4 運(yùn)行項(xiàng)目

簡(jiǎn)單寫了一個(gè)表單后，在控制臺(tái)執(zhí)行

npm run dev

然后在瀏覽器中可以看到效果

是不是很簡(jiǎn)單，通過翻閱TinyVue的文檔我們還可以使用更多的組件，快速完成頁面的搭建。

4. 結(jié)語

今天給大家推薦了TinyVue這款組件庫，教了一下TinyVue怎么使用，總的來說，它的文檔全面，組件豐富，容易上手，非常適合用來開發(fā)一些管理系統(tǒng)的中后臺(tái)頁面，如果你有幸看到這篇文章不妨去嘗試嘗試吧。