参与开源之夏 x OpenTiny 跨端跨框架 UI 组件库贡献，可以赢取奖金🏆！这份《OpenTiny 开源贡献指南》请收好🎁！

大家好，我是 Kagol。

近期有几位朋友在 OpenTiny 技术交流群里询问我们在开源之夏(OSPP)的项目，希望能提前做一些准备工作。

这里给大家简单介绍下开源之夏。

开源之夏是由中科院软件所“开源软件供应链点亮计划”发起并长期支持的一项暑期开源活动，旨在鼓励在校学生积极参与开源软件的开发维护，培养和发掘更多优秀的开发者，促进优秀开源软件社区的蓬勃发展，助力开源软件供应链建设。

开源之夏联合国内外开源社区，针对重要开源软件的开发与维护提供项目任务，面向全球高校学生开放报名，中选学生将在项目资深开发者（项目导师）的指导下，参与开源贡献，完成开发工作并贡献给开源社区。

参与开源之夏，你可以：

• 零距离体验顶级开源项目

• 跟着技术大牛提升研发能力

• 用成果赢取丰厚奖金和证书（基础项目 8000 奖金🏆 / 进阶项目 12000 奖金🏆）

开源之夏：https://summer-ospp.ac.cn/

OpenTiny 开源之夏项目：https://summer-ospp.ac.cn/org/orgdetail/36ed1f70-33b1-47c2-a63c-d3faea6b73fc

以下是开源之夏的活动流程

我能提前做哪些准备呢

大家最关心的两个问题是：

• 我能参与 OpenTiny 的什么项目

• 为了更好地完成项目，我能提前做哪些准备工作

OpenTiny 的开源之夏项目目前正在紧锣密鼓地筹备当中，预计下周将发布出来。

在这之前，大家可以做以下准备：

• 了解 Git 使用和开源贡献基本流程

• 加入 OpenTiny 社区，熟悉 OpenTiny 项目

• 通过解决一些小问题和实现一些简单的需求，提前了解 OpenTiny 开发流程、项目结构、实现原理

OpenTiny 基本介绍

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

它主要有以下亮点特色：

• TinyVue：一套代码同时支持 Vue2 / Vue3，支持 PC / Mobile

• 包含 80 多个功能丰富的组件，并提供多个实用的特色组件

• TinyNG：提供 Angular 组件库

• TinyPro：提供开箱即用的中后台模板

• TinyCLI：提供覆盖前端开发全流程的 CLI 工具

• TinyTheme：提供一款让你的 Web 应用风格更多变的主题配置系统

参考：

• 一个 OpenTiny，Vue2 Vue3 都支持！
  

• 🌈OpenTiny 的这些特色组件，很实用，但你应该没见过
  

• 🎊这个 OpenTiny 开源项目的 CLI 可太牛了，两行命令创建一个美观大气的 Vue Admin 后台管理系统，有手就会，连我的设计师朋友都学会啦啦
  

• 历史性的时刻！OpenTiny 跨端、跨框架组件库正式升级 TypeScript，10 万行代码重获新生！
  

OpenTiny 基本使用

了解一个开源项目最好的方式就是用用看，感受下这个项目能干什么。

假设你已经有了一个 Vue3 项目

npm i @opentiny/vue@3

App.vue 中引入和使用组件

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

参考：

• OpenTiny 快速上手
  

• 一个 OpenTiny，Vue2 Vue3 都支持！
  

OpenTiny 其他开源项目的使用可以参考相应的文档：

• TinyNG 快速上手
  

• TinyCLI 快速上手
  

启动 OpenTiny 项目

要想参与开源项目贡献，就必须先把项目在本地启动起来，才能进行代码调试。

还是以 TinyVue 为例

pnpm ipnpm dev

参考：

• TinyVue 本地启动
  

• TinyVue 贡献指南
  

OpenTiny 其他项目请参考相应的贡献指南文档：

• TinyNG 贡献指南
  

• TinyCLI 贡献指南
  

OpenTiny 目录结构和基本原理

能把项目启动起来，只是参与贡献的起步阶段，等于是迈出了第一步，接下来就需要花很长的时间熟悉项目，并通过持续解决问题深入项目，从而为后续参与更大的贡献打好坚实的基础。

我们来看下 TinyVue 项目的基本目录结构。

├── packages        // 核心子包|  ├── renderless   // 组件逻辑层|  ├── theme        // PC 组件样式|  ├── theme-mobile // Mobile 组件样式|  ├── vue          // Vue 组件模板层|  ├── vue-common   // 公共适配层，实现跨框架的核心|  ├── vue-icon     // 图标|  └── vue-locale   // 国际化├── examples        // 组件 demo / api 文档|  ├── docs├── internals                    // 内部构建、发布脚本，配套插件，项目规范|  ├── cli                       // 构建、发布脚本|  ├── playwright-config         // 集成测试|  ├── unplugin-virtual-template // 虚拟模板插件|  ├── vue-test-utils            // 单元测试|  └── vue-vite-import           // 按需引入插件├── pnpm-workspace.yaml├── tsconfig.json├── CHANGELOG.md├── CONTRIBUTING.md├── CONTRIBUTING.zh-CN.md├── LICENSE├── README.md├── README.zh-CN.md└── package.json

其中最核心的就是 packages 子包目录，这个目录主要包含以下关键子目录：

• renderless：组件逻辑层，这是框架无关的部分，里面封装了组件的数据和方法

• vue ：组件模板层，每个框架需要有一套模板，因为不同框架的模板语法不同

• theme ：组件样式层，这也是框架无关的，组件样式并不是写死的，而是抽成了 CSS 变量，方便主题定制

• vue-common：框架适配层，实现跨框架的关键，每个框架需要有一套适配层

OpenTiny 采用组件与框架分离的设计理念（Renderless 架构），将组件拆分为三个构成部分：组件模板、组件样式和组件逻辑，并针对 Vue2 和 Vue3 实现了一个版本适配器，抹平 Vue2 和 Vue3 的差异，从而实现一套代码同时支持 Vue2 和 Vue3。

这样不管是 Vue2 项目还是 Vue3 项目，使用组件的方式都是一样的，可以实现无缝切换，可以极大地降低 Vue2 迁移到 Vue3 的成本和风险。

如何解决 Issue，参与实际贡献

知道得再多，不实际写点代码，参与实际的贡献，终究还是停留在纸面上，只有解决开源项目的实际用户问题，才能不断积累开源贡献经验，为开源项目创造价值。

我们以两个实际的 Issue 为例，一个是 bug，一个是新特性，带大家一起通过解决 Issue 积累开源贡献经验。

• 🐛 [Bug]: Line Chart图表按照echarts设置options对象,第三层属性无效
  

• ✨ [Feature]: tabs 添加按钮希望挨着tab标签，在大屏幕上，如果放到右侧，移动距离太远
  

解决问题三部曲：

• 复现它

• 找到它

• 解决它

先来看第一个问题，先理解这个问题，并复现出来。

这个问题很容易复现，使用 TinyLine 组件时，配置以下 settings 不生效。

<template>  <tiny-line ... :settings="settings"></tiny-line></template>
<script>const settings = {  tooltip: {    trigger: 'axis',    axisPointer: {      type: 'line',      // not work      lineStyle: {        color: '#ffa147',        width: 2,        type: 'dashed'      }    }  }}</script>

问题复现之后，就是定位问题，找到问题的根因。

经过一番调试，最终发现 getLineTooltip 方法将 tooltip 属性都过滤掉了，只保留了 formatter / trigger 两个属性。所以用户配置 axisPointer 这个属性自然就是不生效的。

代码：chart-line/index.ts#L138 getLineTooltip

问题根因找到之后，就是寻找解决方案啦。

最终解决的方法是将经过内部封装和处理的 ECharts options 属性后面加一层用户传入的 settings 属性覆盖。

return options
->
return { ...options, ...settings }

最终解决的 PR：

• fix(chart-line): fix line-chart tooltip.axisPointer.lineStyle does not take effect close #130
  

另一个 Issue 解决的思路也是一样的，就不再赘述，最终解决的 PR 如下：

• refactor(tabs): optimize new tab button postion close #127
  

欢迎添加小助手微信：opentiny-official 不迷路，我们每周五 20 点会在村长直播间，与大家分享 OpenTiny 开源项目的更多内容，与大家一起成长！

总结

本文主要手把手教大家参与 OpenTiny 开源项目。

从阅读项目的 README 文档了解项目是什么，到尝试使用 OpenTiny，再到通过阅读贡献指南文档，将项目启动起来，再到介绍 OpenTiny 项目目录和基本原理，最后是通过带大家分析和解决项目中实际的用户问题，走完整个贡献的流程。

为大家后续参与 OpenTiny 更多贡献做一个指引和入门。

TinyVue 招募贡献者啦

如果你对我们的跨端跨框架组件库 TinyVue 感兴趣，欢迎参与到我们的开源社区中来，一起将它建设得更好！👏👏

参与 TinyVue 组件库建设，你将收获：

直接的价值：

• 通过打造一个跨端、跨框架的组件库项目，学习最新的 Monorepo + Vite + Vue3 + TypeScript 技术

• 学习从 0 到 1 搭建一个自己的组件库的整套流程和方法论，包括组件库工程化、组件的设计和开发等

• 为自己的简历和职业生涯添彩，参与过优秀的开源项目，这本身就是受面试官青睐的亮点

• 结识一群优秀的、热爱学习、热爱开源的小伙伴，大家一起打造一个伟大的产品

• 参与开源之夏，赢取丰厚奖金

长远的价值：

• 打造个人品牌，提升个人影响力

• 培养良好的编码习惯

• 获得华为云 OpenTiny 开源社区的荣誉 &认可和定制小礼物

• 成为 PMC & Committer 之后还能参与 OpenTiny 整个开源生态的决策和长远规划，培养自己的管理和规划能力未来有更多机会和可能

欢迎广大的开发者参与到我们 TinyVue 的开源项目中来👏

联系我们

如果你对我们 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 🌟）

往期文章推荐

• GitHub Pulse 是什么？它是否能衡量 OpenTiny 开源项目的健康程度？
  

• 历史性的时刻！OpenTiny 跨端、跨框架组件库正式升级 TypeScript，10 万行代码重获新生！
  

• 🌈OpenTiny 的这些特色组件，很实用，但你应该没见过
  

• 一个 OpenTiny，Vue2 Vue3 都支持！
  

• 🎊这个 OpenTiny 开源项目的 CLI 可太牛了，两行命令创建一个美观大气的 Vue Admin 后台管理系统，有手就会，连我的设计师朋友都学会啦啦
  

• 老板：你为什么要选择 Vue？