1 知識(shí)背景

1.1 Vue框架

一個(gè)漸進(jìn)式框架，它易學(xué)易用，性能出色，在國(guó)內(nèi)推廣最好的三大前端框架中，位居首位！

1.2 OpenTiny組件庫(kù)

它在華為內(nèi)部演進(jìn)了9年，支撐了上千個(gè)項(xiàng)目的開發(fā)交付，它一套API同時(shí)支持Vue2和Vue3框架，有100 多個(gè)組件，6套主題，支持國(guó)際化能力，支持Vite和webpack環(huán)境的開發(fā)和構(gòu)建！
它是華為云的2022年貢獻(xiàn)給開源社區(qū)的一個(gè)新的Vue UI組件庫(kù)，代碼托管在GitHub:?https://github.com/opentiny/tiny-vue，?歡迎大家來Star 和提Issue!
安裝包發(fā)布在Npm 公共倉(cāng)庫(kù)，以及華為內(nèi)部中心倉(cāng)，遵從MIT開源協(xié)議，大家可以自由安裝使用！
Opentiny組件庫(kù)官網(wǎng)文檔：https://opentiny.design/tiny-vue

圖1 opentiny介紹

1.3 組件庫(kù)的playgroud

Playground應(yīng)用其實(shí)是一個(gè)實(shí)時(shí)的組件預(yù)覽頁(yè)面，比如Vue官網(wǎng)就提供了“Vue演練場(chǎng)”的功能,鏈接：https://play.vuejs.org/?，它方便的提供了一個(gè)最小的Vue環(huán)境，能讓用戶嘗試寫一些Vue的代碼，并查看實(shí)時(shí)預(yù)覽結(jié)果！

圖2 Vue官方playground效果圖

它支持多文件，支持?Import Map?引入第三方組件腳本，支持實(shí)時(shí)編輯代碼，實(shí)時(shí)編譯、預(yù)覽以及代碼分享！組件庫(kù)的Playground就是要搭建一個(gè)應(yīng)用頁(yè)面，可以實(shí)時(shí)預(yù)覽某個(gè)組件庫(kù)的組件，可以通過它快速了解和嘗試每一個(gè)組件！

Vue 官方開源的Playground的組件---\@vue/repl，參考文檔：https://github.com/vuejs/repl#readme?。

2 如何搭建OpenTiny組件庫(kù)的playground的指導(dǎo)

今天的內(nèi)容就是：搭建一個(gè)OpenTiny組件庫(kù)的演練場(chǎng)。本次任務(wù)需要你熟悉前端，有Vue項(xiàng)目開發(fā)的經(jīng)歷才行。完成效果圖如下：

圖3 挑戰(zhàn)任務(wù)示意圖

請(qǐng)參考以下步驟來完成此次任務(wù)：

2.1 建立新項(xiàng)目，并安裝依賴包

安裝nodejs 16+ , vscode等前端工具，然后使用 vite 來創(chuàng)建一個(gè)vue的javascript工程！

之后安裝Playground的組件和opentiny/vue組件的依賴包

并務(wù)必參考o(jì)pentiny/vue的安裝文檔，?https://opentiny.design/tiny-vue/zh-CN/os-theme/docs/installation?進(jìn)行配置項(xiàng)目。
目前大家已經(jīng)有一個(gè)標(biāo)準(zhǔn)的vue項(xiàng)目了，經(jīng)過npm intall, 之后，就可以npm run dev，啟動(dòng)并看到一個(gè)vue的示例工程。

圖四 vue的新工程初始頁(yè)面

2.2 創(chuàng)建頁(yè)面結(jié)構(gòu)，引入所需要的變量

接下來刪除掉 HelloWorld.vue ，在main.js中， 移除style.css引用，我們只在App.vue中完成全部功能！App.vue的頁(yè)面結(jié)構(gòu)如下：

2.3 開發(fā)頂部功能

應(yīng)用的模板分為上下2部分，上面部分為標(biāo)題Logo和一組選擇功能以及分享按鈕！下面部分就是一個(gè)<Repl>?組件。我們先開發(fā)頂部功能，它的<template>代碼如下：

模板里已經(jīng)綁定了一組數(shù)據(jù)和方法，接下來，我們需要補(bǔ)充這些內(nèi)容到<script>部分。

至此，我們應(yīng)該能得到以下應(yīng)用，頂部的顯示開關(guān)和布局方向綁定了3個(gè)變量，但是版本選擇和分享的功能還沒有開發(fā)！

圖五 頂部功能效果圖

★ 經(jīng)過本步驟，我們學(xué)會(huì)了@opentiny/vue的組件的簡(jiǎn)單使用方法！

2.4 開發(fā)<Repl>組件，實(shí)現(xiàn)腳本預(yù)覽

首先在模板中，引入Repl標(biāo)簽，并且綁定前面的3個(gè)變量以及ReplStore 變量。在 header 結(jié)構(gòu)下面加入下面標(biāo)簽：

?

這里用到store變量和state.previewOptions， 所以在<script>部分，增加這些2處變量：

此時(shí)我們就得到一個(gè)可以聯(lián)動(dòng)的playground的原型了：在右邊編寫代碼，在左邊有實(shí)時(shí)預(yù)覽，操作頂部的功能，<repl>區(qū)域有響應(yīng)，界面如下：

圖六 <Repl>組件效果圖

★ 經(jīng)過本步驟，我們學(xué)會(huì)了<Repl>的組件使用方法！

2.5 實(shí)現(xiàn)切換版本

切換版本就是要切換repl組件引用的importMap的腳本，以實(shí)現(xiàn)動(dòng)態(tài)切換@opentiny/vue的版本。 目前它發(fā)布了 3.8.0\~3.8.4等5個(gè)版本！在<script>中，加以下腳本 ：

我們編寫了versionChange函數(shù)，把它綁定到前面模板的<tiny-select>的 change事件上，這樣下拉變化后，會(huì)通知store設(shè)置新的importMap地址！
現(xiàn)在切換版本后，通過開發(fā)者工具能看到，它會(huì)立即請(qǐng)求相應(yīng)版本的@opentiny/vue的各個(gè)runtime腳本包。

★ 經(jīng)過本步驟，我們學(xué)會(huì)了Tiny-Select的組件的事件綁定以及設(shè)置store的importMap變量！

2.6 實(shí)現(xiàn)代碼分享

Repl組件是支持代碼分享的，它的原理是：store對(duì)象把內(nèi)部狀態(tài)序列化為base64編碼，把它拼在url的hash中分享給其它人。 當(dāng)頁(yè)面加載時(shí)，發(fā)現(xiàn)hash有內(nèi)容，就知道這是store的狀態(tài)，把它傳給store，store內(nèi)部會(huì)進(jìn)行反序列化。
我們應(yīng)用分享的時(shí)候，要記錄組件庫(kù)版本號(hào)和store狀態(tài)，所以我們計(jì)劃用hash同時(shí)保存版本和base64的值： 3.8.4|eNqIVV9p.............

把share函數(shù)綁定給模板中的分享圖標(biāo)的click事件，這樣點(diǎn)擊圖標(biāo)，就能把鏈接復(fù)制到剪切板中了， 再打開一個(gè)新頁(yè)簽，訪問分享鏈接。
在分享鏈接中打開的新頁(yè)面，當(dāng)前hash就有一個(gè)很長(zhǎng)的字符串了，這樣shareData就解析到版本和store序列化的后值，所以把shareData[1]的內(nèi)容賦值給store， 這樣就實(shí)現(xiàn)了分享功能，試一下能不能成功吧！

★ 經(jīng)過本步驟，我們學(xué)會(huì)了分享功能的設(shè)計(jì)以及store的序列化！

2.7 測(cè)試@opentiny/vue組件庫(kù)

下面是一個(gè)@opentiny/vue組件庫(kù)的使用示例，復(fù)制到應(yīng)用窗口，并修改腳本，驗(yàn)證功能是否正確。點(diǎn)擊分享按鈕，并復(fù)制到其它頁(yè)簽，看是否分享內(nèi)容了。

關(guān)于 OpenTiny

OpenTiny 是一套華為云出品的企業(yè)級(jí)組件庫(kù)解決方案，適配 PC 端 / 移動(dòng)端等多端，涵蓋 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有主題配置系統(tǒng) / 中后臺(tái)模板 / CLI 命令行等效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應(yīng)用。

核心亮點(diǎn)：

1. 跨端跨框架：使用 Renderless 無渲染組件設(shè)計(jì)架構(gòu)，實(shí)現(xiàn)了一套代碼同時(shí)支持 Vue2 / Vue3，PC / Mobile 端，并支持函數(shù)級(jí)別的邏輯定制和全模板替換，靈活性好、二次開發(fā)能力強(qiáng)。

2. 組件豐富：PC 端有80+組件，移動(dòng)端有30+組件，包含高頻組件 Table、Tree、Select 等，內(nèi)置虛擬滾動(dòng)，保證大數(shù)據(jù)場(chǎng)景下的流暢體驗(yàn)，除了業(yè)界常見組件之外，我們還提供了一些獨(dú)有的特色組件，如：Split 面板分割器、IpAddress IP地址輸入框、Calendar 日歷、Crop 圖片裁切等

3. 配置式組件：組件支持模板式和配置式兩種使用方式，適合低代碼平臺(tái)，目前團(tuán)隊(duì)已經(jīng)將 OpenTiny 集成到內(nèi)部的低代碼平臺(tái)，針對(duì)低碼平臺(tái)做了大量?jī)?yōu)化

4. 周邊生態(tài)齊全：提供了基于 Angular + TypeScript 的 TinyNG 組件庫(kù)，提供包含 10+ 實(shí)用功能、20+ 典型頁(yè)面的 TinyPro 中后臺(tái)模板，提供覆蓋前端開發(fā)全流程的 TinyCLI 工程化工具，提供強(qiáng)大的在線主題配置平臺(tái) TinyTheme

聯(lián)系我們：

• 官方公眾號(hào)：OpenTiny

• OpenTiny 官網(wǎng)：opentiny.design/

• OpenTiny 代碼倉(cāng)庫(kù)：github.com/opentiny/

• Vue 組件庫(kù)：github.com/opentiny/ti…?（歡迎 Star）

• Angluar組件庫(kù)：github.com/opentiny/ng?（歡迎 Star）

• CLI工具：github.com/opentiny/ti…?（歡迎 Star）