1 知识背景

1.1 Vue框架

一个渐进式框架，它易学易用，性能出色，在国内推广最好的三大前端框架中，位居首位！

1.2 OpenTiny组件库

它在华为内部演进了9年，支撑了上千个项目的开发交付，它一套API同时支持Vue2和Vue3框架，有100 多个组件，6套主题，支持国际化能力，支持Vite和webpack环境的开发和构建！
它是华为云的2022年贡献给开源社区的一个新的Vue UI组件库，代码托管在GitHub: https://github.com/opentiny/tiny-vue， 欢迎大家来Star 和提Issue!
安装包发布在Npm 公共仓库，以及华为内部中心仓，遵从MIT开源协议，大家可以自由安装使用！
Opentiny组件库官网文档：https://opentiny.design/tiny-vue

图1 opentiny介绍

1.3 组件库的playgroud

Playground应用其实是一个实时的组件预览页面，比如Vue官网就提供了“Vue演练场”的功能,链接：https://play.vuejs.org/ ，它方便的提供了一个最小的Vue环境，能让用户尝试写一些Vue的代码，并查看实时预览结果！

图2 Vue官方playground效果图

它支持多文件，支持 Import Map 引入第三方组件脚本，支持实时编辑代码，实时编译、预览以及代码分享！组件库的Playground就是要搭建一个应用页面，可以实时预览某个组件库的组件，可以通过它快速了解和尝试每一个组件！

Vue 官方开源的Playground的组件---\@vue/repl，参考文档：https://github.com/vuejs/repl#readme 。

2 如何搭建OpenTiny组件库的playground的指导

今天的内容就是：搭建一个OpenTiny组件库的演练场。本次任务需要你熟悉前端，有Vue项目开发的经历才行。完成效果图如下：

图3 挑战任务示意图

请参考以下步骤来完成此次任务：

2.1 建立新项目，并安装依赖包

安装nodejs 16+ , vscode等前端工具，然后使用 vite 来创建一个vue的javascript工程！

之后安装Playground的组件和opentiny/vue组件的依赖包

并务必参考opentiny/vue的安装文档， https://opentiny.design/tiny-vue/zh-CN/os-theme/docs/installation 进行配置项目。
目前大家已经有一个标准的vue项目了，经过npm intall, 之后，就可以npm run dev，启动并看到一个vue的示例工程。

图四 vue的新工程初始页面

2.2 创建页面结构，引入所需要的变量

接下来删除掉 HelloWorld.vue ，在main.js中， 移除style.css引用，我们只在App.vue中完成全部功能！App.vue的页面结构如下：

2.3 开发顶部功能

应用的模板分为上下2部分，上面部分为标题Logo和一组选择功能以及分享按钮！下面部分就是一个<Repl> 组件。我们先开发顶部功能，它的<template>代码如下：

模板里已经绑定了一组数据和方法，接下来，我们需要补充这些内容到<script>部分。

至此，我们应该能得到以下应用，顶部的显示开关和布局方向绑定了3个变量，但是版本选择和分享的功能还没有开发！

图五 顶部功能效果图

★ 经过本步骤，我们学会了@opentiny/vue的组件的简单使用方法！

2.4 开发<Repl>组件，实现脚本预览

首先在模板中，引入Repl标签，并且绑定前面的3个变量以及ReplStore 变量。在 header 结构下面加入下面标签：

这里用到store变量和state.previewOptions， 所以在<script>部分，增加这些2处变量：

此时我们就得到一个可以联动的playground的原型了：在右边编写代码，在左边有实时预览，操作顶部的功能，<repl>区域有响应，界面如下：

图六 <Repl>组件效果图

★ 经过本步骤，我们学会了<Repl>的组件使用方法！

2.5 实现切换版本

切换版本就是要切换repl组件引用的importMap的脚本，以实现动态切换@opentiny/vue的版本。 目前它发布了 3.8.0\~3.8.4等5个版本！在<script>中，加以下脚本 ：

我们编写了versionChange函数，把它绑定到前面模板的<tiny-select>的 change事件上，这样下拉变化后，会通知store设置新的importMap地址！
现在切换版本后，通过开发者工具能看到，它会立即请求相应版本的@opentiny/vue的各个runtime脚本包。

★ 经过本步骤，我们学会了Tiny-Select的组件的事件绑定以及设置store的importMap变量！

2.6 实现代码分享

Repl组件是支持代码分享的，它的原理是：store对象把内部状态序列化为base64编码，把它拼在url的hash中分享给其它人。 当页面加载时，发现hash有内容，就知道这是store的状态，把它传给store，store内部会进行反序列化。
我们应用分享的时候，要记录组件库版本号和store状态，所以我们计划用hash同时保存版本和base64的值： 3.8.4|eNqIVV9p.............

把share函数绑定给模板中的分享图标的click事件，这样点击图标，就能把链接复制到剪切板中了， 再打开一个新页签，访问分享链接。
在分享链接中打开的新页面，当前hash就有一个很长的字符串了，这样shareData就解析到版本和store序列化的后值，所以把shareData[1]的内容赋值给store， 这样就实现了分享功能，试一下能不能成功吧！

★ 经过本步骤，我们学会了分享功能的设计以及store的序列化！

2.7 测试@opentiny/vue组件库

下面是一个@opentiny/vue组件库的使用示例，复制到应用窗口，并修改脚本，验证功能是否正确。点击分享按钮，并复制到其它页签，看是否分享内容了。

关于 OpenTiny

OpenTiny 是一套华为云出品的企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。

核心亮点：

1. 跨端跨框架：使用 Renderless 无渲染组件设计架构，实现了一套代码同时支持 Vue2 / Vue3，PC / Mobile 端，并支持函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强。

2. 组件丰富：PC 端有80+组件，移动端有30+组件，包含高频组件 Table、Tree、Select 等，内置虚拟滚动，保证大数据场景下的流畅体验，除了业界常见组件之外，我们还提供了一些独有的特色组件，如：Split 面板分割器、IpAddress IP地址输入框、Calendar 日历、Crop 图片裁切等

3. 配置式组件：组件支持模板式和配置式两种使用方式，适合低代码平台，目前团队已经将 OpenTiny 集成到内部的低代码平台，针对低码平台做了大量优化

4. 周边生态齐全：提供了基于 Angular + TypeScript 的 TinyNG 组件库，提供包含 10+ 实用功能、20+ 典型页面的 TinyPro 中后台模板，提供覆盖前端开发全流程的 TinyCLI 工程化工具，提供强大的在线主题配置平台 TinyTheme

联系我们：

• 官方公众号：OpenTiny

• OpenTiny 官网：opentiny.design/

• OpenTiny 代码仓库：github.com/opentiny/

• Vue 组件库：github.com/opentiny/ti… （欢迎 Star）

• Angluar组件库：github.com/opentiny/ng （欢迎 Star）

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