京東 vue3 組件庫(kù)震撼升級(jí)，如約而至！

鬼哥bbb,實(shí)踐是唯一學(xué)習(xí)Vue3.0的最好方式，使用現(xiàn)有成熟的Ui框架，更加能夠讓你掌握Vue3.0的實(shí)際項(xiàng)目開(kāi)發(fā)技巧，干就完了，奧利給。

京東零售開(kāi)源項(xiàng)目 NutUI 是一套京東風(fēng)格的輕量級(jí)移動(dòng)端 Vue 組件庫(kù)，是開(kāi)發(fā)和服務(wù)于移動(dòng) Web 界面的企業(yè)級(jí)產(chǎn)品。經(jīng)過(guò)長(zhǎng)時(shí)間的開(kāi)發(fā)與打磨，NutUI 3.0 終于和大家見(jiàn)面了！3.0 版本在技術(shù)和視覺(jué)方面都做出了較大改進(jìn)，讓組件看起來(lái)更絢麗，用起來(lái)更舒服。

源碼搶先看：https://github.com/jdf2e/nutui

3.0官網(wǎng)：https://nutui.jd.com/3x

全新改變

技術(shù)看點(diǎn)

1. 擁抱 Vue3

• 引入Vue3新特性 Composition API、Teleport、Emits 等
• 破壞性變更，全面升級(jí)
• 采用組合式 API Composition 語(yǔ)法重構(gòu)，結(jié)構(gòu)清晰，功能模塊化
• 組件 emits 事件單獨(dú)提取，增強(qiáng)代碼可讀性
• 使用 Teleport 新特性重構(gòu)掛載類(lèi)組件

2. 構(gòu)建工具升級(jí)為 Vite2.x

棄用 webpack，引入下一代前端構(gòu)建工具 Vite。啟動(dòng)速度由原來(lái) 30s 提升到 500ms 左右，將大幅提升開(kāi)發(fā)效率。

3. 全面使用 TypeScipt

NutUI 3.0 使用 TypeScript 作為主要開(kāi)發(fā)語(yǔ)言，在前端應(yīng)用復(fù)雜度不斷飆升的大背景下，應(yīng)對(duì)組件不易維護(hù)且難于擴(kuò)展的問(wèn)題。

視覺(jué)體驗(yàn)全面升級(jí)

NutUI是一套擁有京東風(fēng)格的輕量級(jí)的 Vue 組件庫(kù)，隨著 Vue 3.0 不斷完善和發(fā)布，我們的京東設(shè)計(jì)體系也升級(jí)了全新 APP9.0 設(shè)計(jì)語(yǔ)言，NutUI基于京東 APP9.0 設(shè)計(jì)語(yǔ)言結(jié)合零售眾多的應(yīng)用場(chǎng)景打造更加標(biāo)準(zhǔn)化的設(shè)計(jì)語(yǔ)義，對(duì)于組件的擴(kuò)展性，基礎(chǔ)組件可覆蓋多種業(yè)務(wù)場(chǎng)景下的使用

• 減少冗余控件
• 幫助移動(dòng)端設(shè)計(jì)師快速?gòu)?fù)?基礎(chǔ)組件
• 建立通?的細(xì)節(jié)設(shè)計(jì)標(biāo)準(zhǔn)
• 提高界?的模塊化通用程度
• 建?設(shè)計(jì)與開(kāi)發(fā)對(duì)接的基礎(chǔ)標(biāo)準(zhǔn)
• 提?產(chǎn)研輸出對(duì)接的效率，降低輸出工作量
• 基于京東設(shè)計(jì)語(yǔ)言體系，構(gòu)建場(chǎng)景
• 骨骼精細(xì)化重構(gòu)主流程，構(gòu)建“場(chǎng)景動(dòng)線(xiàn)”，讓體驗(yàn)更流暢
• 面對(duì)不斷生長(zhǎng)的產(chǎn)品體系，業(yè)務(wù)類(lèi)型和內(nèi)容不斷復(fù)雜化，設(shè)計(jì)提效推動(dòng)著設(shè)計(jì)體系的變革。通過(guò)組件化的解決方案，降低冗余的設(shè)計(jì)生產(chǎn)成本，使設(shè)計(jì)師專(zhuān)注于更好的用戶(hù)體驗(yàn)，發(fā)揮更高的設(shè)計(jì)價(jià)值。

制作初衷

痛點(diǎn)與難點(diǎn)

組件和規(guī)范已有雛形，在考慮業(yè)務(wù)場(chǎng)景組件的時(shí)候新的問(wèn)題又來(lái)了：我們應(yīng)該在什么時(shí)候放棄規(guī)范，什么時(shí)候堅(jiān)持規(guī)范？除了基于京東 APP 9.0 的最新規(guī)范抽離出來(lái)的組件，我們還要考慮還有很多非零售場(chǎng)景下用戶(hù)的各種業(yè)務(wù)要用到的組件，這是每個(gè)從自己業(yè)務(wù)為起點(diǎn)做組件庫(kù)團(tuán)隊(duì)都會(huì)遇到的問(wèn)題：

（1）一方面我們想保證整體產(chǎn)品的一致性，盡量不打破原有的規(guī)則去設(shè)計(jì)，盡量使用組件覆蓋業(yè)務(wù)需求；

（2）另一方面，在一些特殊的業(yè)務(wù)場(chǎng)景下，不使用組件的設(shè)計(jì)方案會(huì)有更好的體驗(yàn)。這樣的兩難困境會(huì)經(jīng)常遇到，業(yè)務(wù)的特殊性和組件的一致性很難共存。

發(fā)展與挑戰(zhàn)

互聯(lián)網(wǎng)的快速發(fā)展給設(shè)計(jì)師和工程師帶來(lái)了巨大的挑戰(zhàn)，以往的單向協(xié)作模式很難再適用，取而代之的新協(xié)作流程將會(huì)是一種循環(huán)演進(jìn)的模式，令二者之間的交流變得更多。然而，設(shè)計(jì)師和工程師之間難以跨越的“鴻溝”會(huì)降低協(xié)作的效率，為了彼此有更多的時(shí)間去做各自領(lǐng)域更具價(jià)值的事情，就必須消除這層阻礙。

一套優(yōu)秀的組件庫(kù)便可以讓我們的溝通更高效，開(kāi)發(fā)更快捷，產(chǎn)品的體驗(yàn)更一致，可以極大限度地提升產(chǎn)研效率。

標(biāo)準(zhǔn)與體驗(yàn)

組件庫(kù)的初衷其實(shí)是為設(shè)計(jì)和開(kāi)發(fā)帶來(lái)一套標(biāo)準(zhǔn)化的體驗(yàn)，保證統(tǒng)一不同頁(yè)面層級(jí)的信息架構(gòu)、視覺(jué)表達(dá)和交互體驗(yàn)。用戶(hù)在產(chǎn)品終端內(nèi)，各鏈路、各陣地的體驗(yàn)是一致的，看到的信息元素，也會(huì)有共性的傳達(dá)。開(kāi)發(fā)通過(guò)建立公共組件庫(kù)，可以極大地提高開(kāi)發(fā)效率，樣式一旦被前端工程師開(kāi)發(fā)成統(tǒng)一的組件，便有了如下優(yōu)點(diǎn)：

• 減少冗余，優(yōu)化性能，提升開(kāi)發(fā)效率；
• 提高設(shè)計(jì)還原度；
• 降低設(shè)計(jì)和研發(fā)的對(duì)接成本；
• 統(tǒng)一產(chǎn)品體驗(yàn)，映射品牌心智。

設(shè)計(jì)師產(chǎn)出與技術(shù)人員產(chǎn)出之間的同步性，這個(gè)事情幾乎在當(dāng)前每個(gè)體系中都比較頭疼。因?yàn)樵O(shè)計(jì)師設(shè)計(jì)的組件，與技術(shù)人員開(kāi)發(fā)出的組件，其可組合性并不等價(jià)。

舉個(gè)例子：設(shè)計(jì)師給出的設(shè)計(jì)稿，是 6 個(gè)組件拼裝的，但是技術(shù)人員發(fā)現(xiàn)，他需要用 8 個(gè)東西才能拼裝出來(lái)，這就是不等價(jià)的可組合性。這個(gè)問(wèn)題，就會(huì)導(dǎo)致現(xiàn)在很多嘗試消除設(shè)計(jì)與開(kāi)發(fā)邊界的產(chǎn)品做起來(lái)困難重重，因?yàn)樵O(shè)計(jì)師視角的那些組件，其可組合性的考慮通常是不足的。自己的眼界往往是局限的，不可能完全了解用戶(hù)在各個(gè)模塊下，各個(gè)狀態(tài)下的使用場(chǎng)景。其他角色的輸出其實(shí)非常有價(jià)值。不抵觸意見(jiàn)，接納各種思想，抽象提煉關(guān)鍵設(shè)計(jì)點(diǎn)，才能推導(dǎo)出大家認(rèn)可的解決方案。

NUT UI3.0 在建立設(shè)計(jì)與開(kāi)發(fā)對(duì)接的基礎(chǔ)標(biāo)準(zhǔn)方面，我們團(tuán)隊(duì)的設(shè)計(jì)師和研發(fā)共同探索，打散每個(gè)組件元素，重新思考其內(nèi)在的【一致性】和【可組合性】。在不同的需求和場(chǎng)景中也能夠靈活支撐頁(yè)面內(nèi)容進(jìn)行延展和擴(kuò)充，NutUI 也會(huì)在不斷的迭代升級(jí)優(yōu)化中成長(zhǎng)，在產(chǎn)研協(xié)同中發(fā)展進(jìn)步。

賦能案例

作為一個(gè)開(kāi)源的組件庫(kù)，我們不僅覆蓋零售業(yè)務(wù)下的諸多場(chǎng)景需求，對(duì)于開(kāi)源面對(duì)廣大的用戶(hù)的各種場(chǎng)景下的組件應(yīng)用，也都進(jìn)行了深入思考。對(duì)組件庫(kù)所做的每一個(gè)優(yōu)化，都是基于用戶(hù)和場(chǎng)景的假設(shè)。我們的優(yōu)化需要經(jīng)得起用戶(hù)和市場(chǎng)的考驗(yàn)，驗(yàn)證-迭代是我們長(zhǎng)期要做的事。

【NUT UI3.0 部分賦能案例】如下：

貼心通道

長(zhǎng)期以來(lái)，團(tuán)隊(duì)的小伙伴都在盡心盡力地維護(hù)著 NutUI 2.0。在 3.0 版本發(fā)布后，我們依然會(huì)積極地維護(hù)與迭代，為有需要的同學(xué)提供技術(shù)支持，也會(huì)不定時(shí)地發(fā)布一些相關(guān)的文章幫助大家更好地理解與使用我們的組件庫(kù)。

附上我們研發(fā)小哥哥在每次開(kāi)發(fā)組件當(dāng)中的所見(jiàn)所想，來(lái)看看我們?cè)陂_(kāi)發(fā)中點(diǎn)點(diǎn)滴滴的研發(fā)小故事吧：https://jelly.jd.com/search/all?keyword=nutui

敬請(qǐng)期待

NutUI 自 2018 年發(fā)布以來(lái)收獲了 2800+ Star。

2020 年，在 Vue 編程范式做出了重大升級(jí)，并發(fā)布了 Vue3.0 的大背景下，我們積極投入到 NutUI 對(duì) Vue 3.0 的升級(jí)適配工作中。由于線(xiàn)上版本較低、樣式老舊且規(guī)范不統(tǒng)一，我們下定決心進(jìn)行大換血，新的 NutUI 3.0 仍堅(jiān)守著【基于京東風(fēng)格】即組件規(guī)范是根據(jù)京東 APP 最新移動(dòng)端規(guī)范 9.0 來(lái)進(jìn)行視覺(jué)延展設(shè)計(jì)的，各組件秉承著體驗(yàn)極致，標(biāo)準(zhǔn)規(guī)范和擴(kuò)性強(qiáng)來(lái)進(jìn)行產(chǎn)出模板，同時(shí)在產(chǎn)品的功能、體驗(yàn)、易用性和靈活性等各個(gè)方面做了全面的升級(jí)！

平滑過(guò)渡到 Vue3 總歸是很件很艱難的事情，需要考慮兼容性和用戶(hù)影響等種種問(wèn)題，但歷經(jīng) 6 個(gè)月的開(kāi)發(fā)，NutUI 3.0 版本終歸是如期和大家見(jiàn)面了 ！

這是一款組件豐富的 Vue 組件庫(kù)，涵蓋 70+ 精美組件，本次發(fā)版預(yù)計(jì)上線(xiàn)34個(gè)，未來(lái)會(huì)持續(xù)補(bǔ)充更新，敬請(qǐng)期待~

NutUI 著眼未來(lái)，擁有成熟的設(shè)計(jì)體系，強(qiáng)大的可組合性和靈活的可擴(kuò)展能力，期待您的使用與反饋，如您喜歡，來(lái)點(diǎn)個(gè) Star ?? 支持我們一下吧 ~

原文地址：https://juejin.cn/post/6945601440064733198

源碼搶先看：https://github.com/jdf2e/nutui

3.0官網(wǎng)：https://nutui.jd.com/3x