京東跨端組件庫 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