如何從零到一成爲 Vue3 組件庫 Naive UI 的貢獻者？

大家好，我是速凍魚 🐟，一條水系前端 💦，喜歡花裏胡哨 💐，持續沙雕 🌲，是隔壁寒草 🌿 的好兄弟，剛開始寫文章。如果喜歡我的文章，可以關注 ➕ 點贊，爲我注入能量，與我一同成長吧～

閱讀本文 🦀

1. 您將瞭解到發現了開源項目出現的 bug 我們可以怎麼做

2. 您將瞭解到如何快速定位開源項目BUG問題所在

3. 您將瞭解到如何參與開源項目bug修復並提交PR成爲Contributes

NaiveUI 倉庫地址 ：NaiveUI[1]🎄

如果你正在學習vue3+TS，那麼我建議你可以關注一下NaiveUI，一個很棒的vue3組件庫^_^，文中開源項目便指的它 🐬。

前言 🌵

根據需求，需要編寫一個基於 vue3+TS 的聊天室 web 應用，其中發現開源項目 bug 並提交 pr 成功合併 🕶

發現 Bug🐳

起因 🌾

因爲在研究vue3+TS的項目，我就想着去github上找找有沒有vue3+TS的組件庫，想到之前尤大 🐱 推薦過的NaiveUI，star🌟 已經5.8k了，於是我便將項目下載下來玩了一下。

經過 🍂

當時我正在玩NaiveUI的Avatar組件，這個組件原本是支持輸入文字自適應縮放居中的 ☃

但是我發現當使用v-show和v-if時它的表現居然不同，v-show情況下輸入文字後，組件的文字沒有自動縮放居中，於是我在 codesandbox[2] 裏面實驗的一下，確定了這個BUG確實存在 🔥，於是便有了後文。

結果🌵

由於不知道是不是自己寫的代碼問題，懷着揣測的心情想去搞明白究竟怎麼回事 🐷，我便去Issues上面搜索了一番，但是並沒有找到有小夥伴提出類似問題，於是我便提了一個Issues🌍

定位 Bug🐘

step1🍏

我提Issue後並沒有不管它，而是想着怎麼去解決它，那麼問題來了，造成這個bug的原因是什麼呢 ❓，所以我將NaiveUI項目下載到了我的本地，調試一波，調試了半天對問題定位一知半解，有很多疑問，這時候怎麼辦呢 ❓

step2🍎

如何快速瞭解這個項目某個組件的代碼呢 ❓ 第一肯定是自己看源碼，第二就是找作者直接問吶，哈哈哈哈 😂，於是我去找作者尋問了，怎麼找到作者呢 ❓ 在他們官方文檔一般有個Community

通過這個你就可以開始你的沙雕提問了 🤡hhhh ～～～

解決 Bug🐿

step1🌴

現在我們已經知道了問題所在，那就要開始瘋狂轉動你的小腦袋 🌝 去思考怎麼去coding解決這個BUG呢，我們就需要在本地不停的調式，遇到問題記得詢問，愛問纔是好孩紙 😜，當然你會遇到各種問題，不要怕，一個個解決，不會的就問，就查資料，試錯就是進步，以下就是我解決這個BUG的核心代碼

export default defineComponent({
  name: 'Avatar',
  props: avatarProps,
  setup (props) {
    const { mergedClsPrefixRef } = useConfig(props)

    let memoedTextHtml: string | null = null
    const textRef = ref<HTMLElement | null>(null)
    const selfRef = ref<HTMLElement | null>(null)
    const fitTextTransform = (): void => {
      const { value: textEl } = textRef
      //解決BUG的核心代碼在這裏^_^
      if (textEl) {
        if (memoedTextHtml === null || memoedTextHtml !== textEl.innerHTML) {
          memoedTextHtml = textEl.innerHTML
          const { value: selfEl } = selfRef
          if (selfEl) {
            const { offsetWidth: elWidth, offsetHeight: elHeight } = selfEl
            const { offsetWidth: textWidth, offsetHeight: textHeight } = textEl
            const radix = 0.9
            const ratio = Math.min(
              (elWidth / textWidth) * radix,
              (elHeight / textHeight) * radix,
              1
            )
            textEl.style.transform = `translateX(-50%) translateY(-50%) scale(${ratio})`
          }
        }
      }
    }

step2🌱

代碼我們自己修改好了，並不能代表着這個BUG就解決了，我們要提交PR👨‍，讓開源作者 👨‍💻檢視你的代碼是否合格，是否能夠合併進他們的項目中，這個過程也是一個很寶貴的過程，你能和開源作者進行交流 🙎‍♂️，能學習到很多。當然不是一遍就能通過的，你還得自己反覆的修改，當然作者也會幫助你，給你提出他的意見。當然這個過程會遇到困難，你要做的就是耐心慢慢改。

看看我提交了多少次 😢PR

和貢獻者們進行討論 🤓(o^^o)

step3🌿

最後經過你的努力，和開源作者們的幫助，你解決了這個BUG，然後通過了檢視，最後你的PR就會出現Merged字樣，你就完成了對開源項目的貢獻

收穫 🍁

到這裏我們終於可以長舒一口氣啦，滿滿的成就感和滿足感🍉，一切都是值得的，或許這就是開源的魅力吧，你成了NaiveUI的貢獻者之一，還可以跟我的偶像antfu(vuejs 的核心成員 | vueuse 作者) 同框真是幸運呢~

現在你也成爲這個開源項目的Contributers之一啦～ 💫

和偶像同框 😬

一次成功的PR帶給你的不是僅僅是成爲Contributer的喜悅，是你突破困難，克服困難，和優秀的人一起思考，一起解決問題帶來的舒適，它會帶給你信心和動力去做更多的貢獻，去當一個真正的Creator，所以我也希望大家都能一起去參與開源，感受開源的魅力。💦

結束語 🌞

那麼我的第二篇文章就結束了，文章的目的其實很簡單，就是對日常工作的總結和輸出，輸出一些覺得對大家有用的東西，菜不菜不重要，但是熱愛🔥，喜歡大家也能夠參與開源，邁出第一步，也同時非常感謝NaiveUI團隊（他們解決問題的速度真的是極快）也希望通過文章認識更多志同道合的朋友，如果你也喜歡折騰，歡迎加我好友，一起沙雕，一起進步。

github🤖:sudongyu[3]

個人博客 👨‍💻: 速凍魚 blog[4]

vx👦:sudongyuer

本文來自讀者速凍魚的投稿：

https://juejin.cn/post/7010752931993976845

參考資料

[1]

https://github.com/TuSimple/naive-ui: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FTuSimple%2Fnaive-ui

[2]

https://codesandbox.io/: https://link.juejin.cn?target=https%3A%2F%2Fcodesandbox.io%2F

[3]

https://github.com/sudongyuer/: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fsudongyuer%2F

[4]

https://sudongyuer.github.io/: https://link.juejin.cn?target=https%3A%2F%2Fsudongyuer.github.io%2F

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/U03orWxO3I5NSWWpLRXm0w

猜你喜歡