大家好，我是 Kagol。
近期有幾位朋友在 OpenTiny 技術(shù)交流群里詢問(wèn)我們?cè)陂_(kāi)源之夏(OSPP)的項(xiàng)目，希望能提前做一些準(zhǔn)備工作。
這里給大家簡(jiǎn)單介紹下開(kāi)源之夏。
開(kāi)源之夏是由中科院軟件所“開(kāi)源軟件供應(yīng)鏈點(diǎn)亮計(jì)劃”發(fā)起并長(zhǎng)期支持的一項(xiàng)暑期開(kāi)源活動(dòng)，旨在鼓勵(lì)在校學(xué)生積極參與開(kāi)源軟件的開(kāi)發(fā)維護(hù)，培養(yǎng)和發(fā)掘更多優(yōu)秀的開(kāi)發(fā)者，促進(jìn)優(yōu)秀開(kāi)源軟件社區(qū)的蓬勃發(fā)展，助力開(kāi)源軟件供應(yīng)鏈建設(shè)。
開(kāi)源之夏聯(lián)合國(guó)內(nèi)外開(kāi)源社區(qū)，針對(duì)重要開(kāi)源軟件的開(kāi)發(fā)與維護(hù)提供項(xiàng)目任務(wù)，面向全球高校學(xué)生開(kāi)放報(bào)名，中選學(xué)生將在項(xiàng)目資深開(kāi)發(fā)者（項(xiàng)目導(dǎo)師）的指導(dǎo)下，參與開(kāi)源貢獻(xiàn)，完成開(kāi)發(fā)工作并貢獻(xiàn)給開(kāi)源社區(qū)。
參與開(kāi)源之夏，你可以：
- 零距離體驗(yàn)頂級(jí)開(kāi)源項(xiàng)目
- 跟著技術(shù)大牛提升研發(fā)能力
- 用成果贏取豐厚獎(jiǎng)金和證書（基礎(chǔ)項(xiàng)目 8000 獎(jiǎng)金?? / 進(jìn)階項(xiàng)目 12000 獎(jiǎng)金??）
開(kāi)源之夏：https://summer-ospp.ac.cn/
OpenTiny 開(kāi)源之夏項(xiàng)目：https://summer-ospp.ac.cn/org/orgdetail/36ed1f70-33b1-47c2-a63c-d3faea6b73fc
以下是開(kāi)源之夏的活動(dòng)流程
我能提前做哪些準(zhǔn)備呢
大家最關(guān)心的兩個(gè)問(wèn)題是：
- 我能參與 OpenTiny 的什么項(xiàng)目
- 為了更好地完成項(xiàng)目，我能提前做哪些準(zhǔn)備工作
OpenTiny 的開(kāi)源之夏項(xiàng)目目前正在緊鑼密鼓地籌備當(dāng)中，預(yù)計(jì)下周將發(fā)布出來(lái)。
在這之前，大家可以做以下準(zhǔn)備：
- 了解 Git 使用和開(kāi)源貢獻(xiàn)基本流程
- 加入 OpenTiny 社區(qū)，熟悉 OpenTiny 項(xiàng)目
- 通過(guò)解決一些小問(wèn)題和實(shí)現(xiàn)一些簡(jiǎn)單的需求，提前了解 OpenTiny 開(kāi)發(fā)流程、項(xiàng)目結(jié)構(gòu)、實(shí)現(xiàn)原理
OpenTiny 基本介紹
OpenTiny?是一套華為云出品的企業(yè)級(jí) UI 組件庫(kù)解決方案，適配 PC 端 / 移動(dòng)端等多端，涵蓋 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有主題配置系統(tǒng) / 中后臺(tái)模板 / CLI 命令行等效率提升工具，可幫助開(kāi)發(fā)者高效開(kāi)發(fā) Web 應(yīng)用。
它主要有以下亮點(diǎn)特色：
- TinyVue：一套代碼同時(shí)支持 Vue2 / Vue3，支持 PC / Mobile
- 包含 80 多個(gè)功能豐富的組件，并提供多個(gè)實(shí)用的特色組件
- TinyNG：提供 Angular 組件庫(kù)
- TinyPro：提供開(kāi)箱即用的中后臺(tái)模板
- TinyCLI：提供覆蓋前端開(kāi)發(fā)全流程的 CLI 工具
- TinyTheme：提供一款讓你的 Web 應(yīng)用風(fēng)格更多變的主題配置系統(tǒng)
參考：
- 一個(gè) OpenTiny，Vue2 Vue3 都支持！
- ??OpenTiny 的這些特色組件，很實(shí)用，但你應(yīng)該沒(méi)見(jiàn)過(guò)
- ??這個(gè) OpenTiny 開(kāi)源項(xiàng)目的 CLI 可太牛了，兩行命令創(chuàng)建一個(gè)美觀大氣的 Vue Admin 后臺(tái)管理系統(tǒng)，有手就會(huì)，連我的設(shè)計(jì)師朋友都學(xué)會(huì)啦啦
- 歷史性的時(shí)刻！OpenTiny 跨端、跨框架組件庫(kù)正式升級(jí) TypeScript，10 萬(wàn)行代碼重獲新生！
OpenTiny 基本使用
了解一個(gè)開(kāi)源項(xiàng)目最好的方式就是用用看，感受下這個(gè)項(xiàng)目能干什么。
假設(shè)你已經(jīng)有了一個(gè) Vue3 項(xiàng)目
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 快速上手
- 一個(gè) OpenTiny，Vue2 Vue3 都支持！
OpenTiny 其他開(kāi)源項(xiàng)目的使用可以參考相應(yīng)的文檔：
- TinyNG 快速上手
- TinyCLI 快速上手
啟動(dòng) OpenTiny 項(xiàng)目
要想?yún)⑴c開(kāi)源項(xiàng)目貢獻(xiàn)，就必須先把項(xiàng)目在本地啟動(dòng)起來(lái)，才能進(jìn)行代碼調(diào)試。
還是以 TinyVue 為例
pnpm i
pnpm dev
參考：
- TinyVue 本地啟動(dòng)
- TinyVue 貢獻(xiàn)指南
OpenTiny 其他項(xiàng)目請(qǐng)參考相應(yīng)的貢獻(xiàn)指南文檔：
- TinyNG 貢獻(xiàn)指南
- TinyCLI 貢獻(xiàn)指南
OpenTiny 目錄結(jié)構(gòu)和基本原理
能把項(xiàng)目啟動(dòng)起來(lái)，只是參與貢獻(xiàn)的起步階段，等于是邁出了第一步，接下來(lái)就需要花很長(zhǎng)的時(shí)間熟悉項(xiàng)目，并通過(guò)持續(xù)解決問(wèn)題深入項(xiàng)目，從而為后續(xù)參與更大的貢獻(xiàn)打好堅(jiān)實(shí)的基礎(chǔ)。
我們來(lái)看下 TinyVue 項(xiàng)目的基本目錄結(jié)構(gòu)。
├── packages // 核心子包
| ├── renderless // 組件邏輯層
| ├── theme // PC 組件樣式
| ├── theme-mobile // Mobile 組件樣式
| ├── vue // Vue 組件模板層
| ├── vue-common // 公共適配層，實(shí)現(xiàn)跨框架的核心
| ├── vue-icon // 圖標(biāo)
| └── vue-locale // 國(guó)際化
├── examples // 組件 demo / api 文檔
| ├── docs
├── internals // 內(nèi)部構(gòu)建、發(fā)布腳本，配套插件，項(xiàng)目規(guī)范
| ├── cli // 構(gòu)建、發(fā)布腳本
| ├── playwright-config // 集成測(cè)試
| ├── unplugin-virtual-template // 虛擬模板插件
| ├── vue-test-utils // 單元測(cè)試
| └── 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 子包目錄，這個(gè)目錄主要包含以下關(guān)鍵子目錄：
- renderless：組件邏輯層，這是框架無(wú)關(guān)的部分，里面封裝了組件的數(shù)據(jù)和方法
- vue ：組件模板層，每個(gè)框架需要有一套模板，因?yàn)椴煌蚣艿哪０逭Z(yǔ)法不同
- theme ：組件樣式層，這也是框架無(wú)關(guān)的，組件樣式并不是寫死的，而是抽成了CSS變量，方便主題定制
- vue-common：框架適配層，實(shí)現(xiàn)跨框架的關(guān)鍵，每個(gè)框架需要有一套適配層
OpenTiny?采用組件與框架分離的設(shè)計(jì)理念（Renderless 架構(gòu)），將組件拆分為三個(gè)構(gòu)成部分：組件模板、組件樣式和組件邏輯，并針對(duì) Vue2 和 Vue3 實(shí)現(xiàn)了一個(gè)版本適配器，抹平 Vue2 和 Vue3 的差異，從而實(shí)現(xiàn)一套代碼同時(shí)支持 Vue2 和 Vue3。
這樣不管是 Vue2 項(xiàng)目還是 Vue3 項(xiàng)目，使用組件的方式都是一樣的，可以實(shí)現(xiàn)無(wú)縫切換，可以極大地降低 Vue2 遷移到 Vue3 的成本和風(fēng)險(xiǎn)。
如何解決 Issue，參與實(shí)際貢獻(xiàn)
知道得再多，不實(shí)際寫點(diǎn)代碼，參與實(shí)際的貢獻(xiàn)，終究還是停留在紙面上，只有解決開(kāi)源項(xiàng)目的實(shí)際用戶問(wèn)題，才能不斷積累開(kāi)源貢獻(xiàn)經(jīng)驗(yàn)，為開(kāi)源項(xiàng)目創(chuàng)造價(jià)值。
我們以兩個(gè)實(shí)際的 Issue 為例，一個(gè)是 bug，一個(gè)是新特性，帶大家一起通過(guò)解決 Issue 積累開(kāi)源貢獻(xiàn)經(jīng)驗(yàn)。
- ?? [Bug]: Line Chart圖表按照echarts設(shè)置options對(duì)象,第三層屬性無(wú)效
- ? [Feature]: tabs 添加按鈕希望挨著tab標(biāo)簽，在大屏幕上，如果放到右側(cè)，移動(dòng)距離太遠(yuǎn)
解決問(wèn)題三部曲：
- 復(fù)現(xiàn)它
- 找到它
- 解決它
先來(lái)看第一個(gè)問(wèn)題，先理解這個(gè)問(wèn)題，并復(fù)現(xiàn)出來(lái)。
這個(gè)問(wèn)題很容易復(fù)現(xiàn)，使用 TinyLine 組件時(shí)，配置以下 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>
問(wèn)題復(fù)現(xiàn)之后，就是定位問(wèn)題，找到問(wèn)題的根因。
經(jīng)過(guò)一番調(diào)試，最終發(fā)現(xiàn) getLineTooltip 方法將 tooltip 屬性都過(guò)濾掉了，只保留了 formatter / trigger 兩個(gè)屬性。所以用戶配置 axisPointer 這個(gè)屬性自然就是不生效的。
代碼：chart-line/index.ts#L138 getLineTooltip
問(wèn)題根因找到之后，就是尋找解決方案啦。
最終解決的方法是將經(jīng)過(guò)內(nèi)部封裝和處理的 ECharts options 屬性后面加一層用戶傳入的 settings 屬性覆蓋。
return options
->
return { ...options, ...settings }
最終解決的 PR：
- fix(chart-line): fix line-chart tooltip.axisPointer.lineStyle does not take effect close #130
另一個(gè) Issue 解決的思路也是一樣的，就不再贅述，最終解決的 PR 如下：
- refactor(tabs): optimize new tab button postion close #127
歡迎添加小助手微信：opentiny-official 不迷路，我們每周五20點(diǎn)會(huì)在村長(zhǎng)直播間，與大家分享 OpenTiny 開(kāi)源項(xiàng)目的更多內(nèi)容，與大家一起成長(zhǎng)！
總結(jié)
本文主要手把手教大家參與 OpenTiny 開(kāi)源項(xiàng)目。
從閱讀項(xiàng)目的 README 文檔了解項(xiàng)目是什么，到嘗試使用 OpenTiny，再到通過(guò)閱讀貢獻(xiàn)指南文檔，將項(xiàng)目啟動(dòng)起來(lái)，再到介紹 OpenTiny 項(xiàng)目目錄和基本原理，最后是通過(guò)帶大家分析和解決項(xiàng)目中實(shí)際的用戶問(wèn)題，走完整個(gè)貢獻(xiàn)的流程。
為大家后續(xù)參與 OpenTiny 更多貢獻(xiàn)做一個(gè)指引和入門。
TinyVue 招募貢獻(xiàn)者啦
如果你對(duì)我們的跨端跨框架組件庫(kù) TinyVue 感興趣，歡迎參與到我們的開(kāi)源社區(qū)中來(lái)，一起將它建設(shè)得更好！????
參與 TinyVue 組件庫(kù)建設(shè)，你將收獲：
直接的價(jià)值：
- 通過(guò)打造一個(gè)跨端、跨框架的組件庫(kù)項(xiàng)目，學(xué)習(xí)最新的
Monorepo+Vite+Vue3+TypeScript技術(shù) - 學(xué)習(xí)從 0 到 1 搭建一個(gè)自己的組件庫(kù)的整套流程和方法論，包括組件庫(kù)工程化、組件的設(shè)計(jì)和開(kāi)發(fā)等
- 為自己的簡(jiǎn)歷和職業(yè)生涯添彩，參與過(guò)優(yōu)秀的開(kāi)源項(xiàng)目，這本身就是受面試官青睞的亮點(diǎn)
- 結(jié)識(shí)一群優(yōu)秀的、熱愛(ài)學(xué)習(xí)、熱愛(ài)開(kāi)源的小伙伴，大家一起打造一個(gè)偉大的產(chǎn)品
- 參與開(kāi)源之夏，贏取豐厚獎(jiǎng)金
長(zhǎng)遠(yuǎn)的價(jià)值：
- 打造個(gè)人品牌，提升個(gè)人影響力
- 培養(yǎng)良好的編碼習(xí)慣
- 獲得華為云 OpenTiny 開(kāi)源社區(qū)的榮譽(yù)&認(rèn)可和定制小禮物
- 成為 PMC & Committer 之后還能參與 OpenTiny 整個(gè)開(kāi)源生態(tài)的決策和長(zhǎng)遠(yuǎn)規(guī)劃，培養(yǎng)自己的管理和規(guī)劃能力
未來(lái)有更多機(jī)會(huì)和可能
歡迎廣大的開(kāi)發(fā)者參與到我們 TinyVue 的開(kāi)源項(xiàng)目中來(lái)??
聯(lián)系我們
如果你對(duì)我們 OpenTiny 的開(kāi)源項(xiàng)目感興趣，歡迎添加小助手微信：opentiny-official，拉你進(jìn)群，一起交流前端技術(shù)，一起玩開(kāi)源。
OpenTiny 官網(wǎng)：https://opentiny.design/
OpenTiny 倉(cāng)庫(kù)：https://github.com/opentiny/
Vue 組件庫(kù)：https://github.com/opentiny/tiny-vue（歡迎 Star ??）
Angular 組件庫(kù)：https://github.com/opentiny/ng（歡迎 Star ??）
CLI 工具：https://github.com/opentiny/tiny-cli（歡迎 Star ??）文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-415735.html
往期文章推薦文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-415735.html
- GitHub Pulse 是什么？它是否能衡量 OpenTiny 開(kāi)源項(xiàng)目的健康程度？
- 歷史性的時(shí)刻！OpenTiny 跨端、跨框架組件庫(kù)正式升級(jí) TypeScript，10 萬(wàn)行代碼重獲新生！
- ??OpenTiny 的這些特色組件，很實(shí)用，但你應(yīng)該沒(méi)見(jiàn)過(guò)
- 一個(gè) OpenTiny，Vue2 Vue3 都支持！
- ??這個(gè) OpenTiny 開(kāi)源項(xiàng)目的 CLI 可太牛了，兩行命令創(chuàng)建一個(gè)美觀大氣的 Vue Admin 后臺(tái)管理系統(tǒng)，有手就會(huì)，連我的設(shè)計(jì)師朋友都學(xué)會(huì)啦啦
- 老板：你為什么要選擇 Vue？
到了這里，關(guān)于參與開(kāi)源之夏 x OpenTiny 跨端跨框架 UI 組件庫(kù)貢獻(xiàn)，可以贏取獎(jiǎng)金?！這份《OpenTiny 開(kāi)源貢獻(xiàn)指南》請(qǐng)收好?！的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
