共计 2569 个字符，预计需要花费 7 分钟才能阅读完成。
本期直播主题是《解决开发者“兼容”难题，OpenTiny 技术摸索与利用解读》，华为云开源 DTSE 技术布道师曾令卡在本期直播中与开发者一起具体交换了 OpenTiny 组件库解决方案的外围劣势和设计理念。并通过具体的实操给大家演示 OpenTiny 如何通过一行命令搭建中后盾管理系统，同时也给大家演示了定制化的主题配置零碎。
OpenTiny 是什么？
OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 挪动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，领有主题配置零碎 / 中后盾模板 / CLI 命令行等效率晋升工具，可帮忙开发者高效开发 Web 利用。
OpenTiny 我的项目的 5 大劣势
1、跨端、跨框架的企业级前端组件库
OpenTiny 通过 9 年积淀孵化，目前是对外开源，不仅提供 Vue 组件库还提供 Angluar 组件库、中后盾模板、主题配置零碎、脚手架 CLI 工具等。因为在前端开发过程中，依据理论业务场景不同，开发者须要面临很多开发问题，例如组件库版本兼容问题，开发工作量大的问题等。目前业界组件库，个别依照前端框架能够划分为 React 组件库，Angluar 组件库、Vue 组件库，也能够依照面向的终端不同来分类，如 PC 组件库、Mobile 组件库、小程序组件库。
因为 Vue2 将于 2023 年年底不再保护，因而很多我的项目须要从 Vue2 降级到 Vue3 版本，而个别状况下 Vue2 和 Vue3 版本不能兼容，对应的 Vue2 组件库与 Vue3 组件库的代码也是不同的。OpenTiny 能够实现一套代码同时反对 Vue2 和 Vue3, 因而应用 OpenTiny 组件库的 Vue2 我的项目可间接平滑降级到 Vue3，升高开发成本，整个过程无需批改组件 API，无需放心组件性能不统一，无需放心业务连续性问题。
2、OpenTiny 提供翻新的架构设计
目前 OpenTiny 的 TinyVue 组件库，是采纳 Renderless 设计架构，联合面向业务逻辑的开发范式与无渲染组件的设计模式，如果应用面向业务逻辑的开发范式，仅仅只能让应用雷同的业务逻辑从本来散落到生命周期各个阶段的局部汇聚到一起。无渲染组件的设计模式的实现形式有很多种，比方 React 中能够应用 HOC 高阶函数，Vue 中能够应用 scopedSlot 作用域插槽，但当组件业务逻辑日趋简单时，高阶函数和作用域插槽让代码变得难以了解和保护。只有将两者联合在一起，才有实现 Web 组件反对跨端的可能性。
3、OpenTiny 提供丰盛的场景
历经 9 年工夫打磨的 150+ 企业级组件，满足华为外部 IT 系统对性能、性能、可信的极致要求。在 MetaERP 等要害零碎中也禁受住考验。
4、OpenTiny 提供齐备的生态
不止是提供不同框架的组件库，并且还提供一系列开发工具，例如笼罩前端开发全流程的 CLI 脚手架工具、开箱即用的中后盾模板、晋升效率的主题配置零碎。
5、OpenTiny 提供配置式组件
OpenTiny 可反对标签式组件用法和配置式组件用法，非常适合低代码平台，目前曾经用在了咱们外部的 TinyEditor 可视化设计器（低代码平台）中，OpenTiny 的组件针对低代码平台做了很多优化，无需做二次封装。
手把手带你实操体验 OpenTiny
1. 试验一：此次实操案例是基于 OpenTiny 通过一行命令搭建后盾管理系统。
筹备工作
TinyPro of Vue 前端脚手架是基于 TinyCLI 封装的套件，因而，首先要装置 TinyCLI.
初始化
提供了套件来疾速的初始化脚手架。tiny init pro
配置项目名称、我的项目形容、技术栈（抉择 ”vue”）
? 请输出我的项目形容：(基于 TinyPro 套件创立的中后盾零碎)
? 请抉择你心愿应用的技术栈：(Use arrow keys)
> vue
angular开发
脚手架初始化胜利之后就能够开始进行开发了，咱们提供了一些命令来辅助开发。tiny start
运行这个脚本会启动服务，主动关上默认浏览器展现你的页面。当你从新编辑代码后，页面还会主动刷新。
tiny build
运行这个脚本将会编译你的我的项目，你能够在我的项目中的 dist 目录中找到编译后的文件用于部署。
2. 试验二：在线配置主题，实现品牌定制
主题配置零碎反对用户创立一个基于组件默认款式的主题，也反对用户复制主题商店中已有的主题。
创立主题
编辑主题
反对多人合作的主题编辑性能，满足用户多样化的产品需要。进入我的主题列表页，点击须要编辑的主题，进入主题编辑页，定制属于本人的主题格调。
o 款式配置次要分为根底款式类和组件的款式类配置。
o 根底款式的批改会影响到全局组件的款式。根底款式蕴含了 TinyVue 设计零碎中定义的一系列的根底变量（token），如色彩，字体，尺寸等。它们作为根底变量，被 Button，Input 等根底组件所援用。
根底款式：以色彩为例
品牌色反对基于基色批改并由算法主动生成一套色阶。
反对单个色彩的调整以满足产品的需要
根底款式色彩变量（token）的批改会影响到组件的格调
公布主题
点击公布后，将用户的配置转换成代码。一键式主题公布以及版本治理，让治理更简略；装置后即可应用，让开发者更专一。
装置应用主题
公布胜利后，用户能够通过 npm install 的形式装置主题，以 @opentiny/vue-custom1 为例。
装置npm install @opentiny/vue-custom1
在我的项目中应用
main.js 文件中导入主题款式文件import '@opentiny/vue-custom1/index.css' // 新增
成果
欢送退出 OpenTiny 开源社区。增加微信小助手：opentiny-official 一起参加共建～
OpenTiny 官网：https://opentiny.design/
OpenTiny 代码仓库：https://github.com/opentiny/
TinyVue 组件库：https://github.com/opentiny/tiny-vue（欢送 Star）
TinyNG 组件库：https://github.com/opentiny/ng（欢送 Star）
TinyCLI 工具：https://github.com/opentiny/tiny-cli（欢送 Star）
欢送进入 OpenTiny 代码仓库 Star🌟
TinyVue、TinyNG、TinyCLI~
