大家好，我是 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 積累開源貢獻經驗。
- ? [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：
另一個 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 ?）
往期文章推薦