关于前端:参与开源之夏-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 i
pnpm 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 积攒开源奉献教训。

解决问题三部曲：

• 复现它
• 找到它
• 解决它

先来看第一个问题，先了解这个问题，并复现进去。

这个问题很容易复现，应用 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？