大家好,我是 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 项目
要想参与开源项目贡献,就必须先把项目在本地启动起来,才能进行代码调试。
还是以 TinyVue 为例
pnpm i
pnpm dev
参考:
OpenTiny 其他项目请参考相应的贡献指南文档:
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:
另一个 Issue 解决的思路也是一样的,就不再赘述,最终解决的 PR 如下:
欢迎添加小助手微信: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 🌟)
往期文章推荐
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。