京東跨端組件庫 NutUI 2.0 來襲

來源:授權(quán)轉(zhuǎn)載自京東技術(shù) | 責(zé)編:可可
今天帶來的是一款京東的移動端 Vue 組件庫,移動端 Vue 組件庫 NutUI 自發(fā)布以來受到了廣泛的關(guān)注。據(jù)不完全統(tǒng)計,目前至少有30多個京東的 web 項目正在使用 NutUI 。

經(jīng)過一段時間緊鑼密鼓的開發(fā),近期,我們正式發(fā)布了 NutUI 的 2.0 版。NutUI 2.0 定位于一個京東風(fēng)格的移動端精品組件庫,并不是 NutUI 1.x 的簡單升級版。
(手機掃描二維碼可以體驗 NutUI 2.0 的組件示例)
NutUI 官網(wǎng)同步進行了改版,也歡迎大家訪問 https://nutui.jd.com ( PC 端)。
我們來看看 NutUI 2.0 有哪些重要的新特性。
NutUI 2.0 的組件在開發(fā)時參考了京東APP 7.0 視覺規(guī)范,統(tǒng)一了視覺風(fēng)格和動效。

如果與你需要的風(fēng)格有差異,還可以通過增加一個自定義 class 來調(diào)整樣式。如果差異較大,甚至可以替換掉整個組件的默認(rèn)樣式文件。你的組件,你做主。
NutUI 2.0 支持自定義組件庫整體主題風(fēng)格。通過在項目中重置一些樣式變量的值,可輕而易舉的實現(xiàn)組件換膚。

NutUI 1.x 的按需加載是通過自定義構(gòu)建的方式來實現(xiàn)的,雖可滿足需求,但是讓用戶每次都進 node_modules 目錄下找到 NutUI 項目目錄安裝依賴,再進行自定義構(gòu)建多有不便。于是 2.0 版我們對按需加載功能進行了重新設(shè)計。
使用 NutUI 2.0 的組件時,不必導(dǎo)入完整的組件庫,直接在項目中引入我們需要的組件文件及其對應(yīng)的樣式文件即可。如:
import Button from '@nutui/nutui/dist/packages/button/button.js';
import Switch from '@nutui/nutui/dist/packages/switch/switch.js';
import '@nutui/nutui/dist/packages/button/button.css';
import '@nutui/nutui/dist/packages/Switch/switch.css';
不需要再進行自定義構(gòu)建了,比 NutUI 1.x 方便不少吧。如果你覺得這種方式還不夠方便或者不夠優(yōu)雅,也沒關(guān)系,通過我們提供的 webpack 插件 @nutui/babel-plugin-separate-import ,還可以支持 ES6module 風(fēng)格的按需加載寫法,且兼容不支持 ES6module 語法的瀏覽器:
import { Button, Icon } from '@nutui/nutui';
安裝插件也麻煩?不妨試試我們提供的一個 Vue 項目的構(gòu)建工具 Gaea-cli,它可以生成一個已內(nèi)置了這個插件的 Vue 模板工程,你可以直接基于這個工程開發(fā)項目。另外,這個構(gòu)建工具還有很多高級功能,以及針對我廠開發(fā)環(huán)境進行的特定優(yōu)化,此前的系列版本已經(jīng)過數(shù)十個項目的驗證,推薦大家使用。
NutUI 2.0 開始支持多語言。組件默認(rèn)使用中文,可加載其他語言包來實現(xiàn)多語言切換功能。如果你的項目中已經(jīng)使用了目前 Vue 生態(tài)里特別流行的國際化插件 vue-i18n 來實現(xiàn)項目的國際化功能,那么在使用 NutUI 2.0 組件的時候,也完全不需要擔(dān)心,NutUI 2.0 的國際化功能是完全兼容 vue-i18n 插件的。
我們認(rèn)為移動端組件庫圖標(biāo)方案的最佳實踐是 SVG 方案,因為 SVG 圖標(biāo)較字體圖標(biāo)更靈活,更利于按需加載,也不會招致部分瀏覽器對其進行抗鋸齒處理,清晰度高,結(jié)合 symbol 元素還可以實現(xiàn) SVG 圖標(biāo)的復(fù)用。SVG 圖標(biāo)在移動端的兼容性也是良好的。我們在 NutUI 1.x 時期就選擇了 SVG 作為組件庫的圖標(biāo)方案,而這種選擇在 NutUI 2.0 版本獲得了傳承。
除了上述幾點,NutUI 2.0 還有支持 Typescript,支持 SSR 服務(wù)端渲染等特性。
NutUI 2.0 基于全新的架構(gòu)開發(fā),并非基于 1.0 的架構(gòu)升級而來。我們結(jié)合 1.0 的架構(gòu)經(jīng)驗、2.0 的功能需求、工具的新變化、我廠的開發(fā)環(huán)境、主流優(yōu)秀組件庫的實現(xiàn)方案等因素,全新打造了 2.0 的架構(gòu)。架構(gòu)方面主要有以下特點:
基于 Webpack4.0 開發(fā),擁有更快的構(gòu)建速度,輸出更小的 bundle 文件
一次性構(gòu)建出多種類型的 bundle,兼容各種主流模塊化場景和非模塊化引用場景
基于 Babel7 實現(xiàn)了 Polyfill 的智能加載,無須額外引入 Babel-polyfill 文件也可兼容低版本瀏覽器
集成 Carefree 方案,大幅提升我廠開發(fā)環(huán)境的真機調(diào)試效率
Markdown 格式的文檔便于書寫和 Github 閱讀,基于 MD 文件自動生成文檔網(wǎng)站
示例頁面 PWA 加持,支持離線緩存和創(chuàng)建主屏圖標(biāo)
接入持續(xù)化集成和自動化測試,提升代碼可靠性
支持自動生成新組件模板
配套一個 webpack 插件和一個 Vue 模板工程構(gòu)建工具
…
組件庫是個舞臺,臺上的主角不是組件庫的功能和架構(gòu),而是組件。我們在組件開發(fā)上下了不少功夫,精心挑選和打磨了一批組件。NutUI 2.0 一期擁有組件三十多個,涉及“基礎(chǔ)”、“布局”,“數(shù)據(jù)錄入”、“操作反饋”、“數(shù)據(jù)展示”、“導(dǎo)航”6大類。

接下來,我們會集中精力繼續(xù)新增一批組件,同時也會跟進對現(xiàn)有組件的打磨和維護。大家有什么通用組件的需求也可以反饋給我們。
NutUI 2.0 還有一個重磅功能 —— 支持將 Vue 組件轉(zhuǎn)成微信小程序組件,從而實現(xiàn)一次編碼跨平臺使用。目前這個功能仍在加緊開發(fā)中,稍后上線,盡請期待哦。
歡迎感興趣的小伙伴參與 NutUI 項目的開發(fā),我們建議通過提 pull request 的方式參與。如果要修一個 bug,請?zhí)峤?pull request 到 master 分支;如果你要提一個新增功能或組件的 pull request,那么請基于 v2 分支,通過 Code Review 之后,我們會合并你的代碼。
NutUI 2.0 組件庫沒有埋任何彩蛋,大家盡管放心使用哦~
官網(wǎng):
https://nutui.jd.comGithub倉庫:
https://github.com/jdf2e/nutui/更新日志:
https://github.com/jdf2e/nutui/releases
