京東跨端組件庫 NutUI 2.0 來襲

來源：授權轉載自京東技術 | 責編：可可 

今天帶來的是一款京東的移動端 Vue 組件庫，移動端 Vue 組件庫 NutUI 自發布以來受到了廣泛的關注。據不完全統計，目前至少有30多個京東的 web 項目正在使用 NutUI 。

經過一段時間緊鑼密鼓的開發，近期，我們正式發佈了 NutUI 的 2.0 版。NutUI 2.0 定位於一個京東風格的移動端精品組件庫，並不是 NutUI 1.x 的簡單升級版。

（手機掃描二維碼可以體驗 NutUI 2.0 的組件示例）

NutUI 官網同步進行了改版，也歡迎大家訪問 https://nutui.jd.com ( PC 端)。

我們來看看 NutUI 2.0 有哪些重要的新特性。

 

京東APP 7.0 視覺風格

NutUI 2.0 的組件在開發時參考了京東APP 7.0 視覺規範，統一了視覺風格和動效。

如果與你需要的風格有差異，還可以通過增加一個自定義 class 來調整樣式。如果差異較大，甚至可以替換掉整個組件的默認樣式文件。你的組件，你做主。

定製主題

NutUI 2.0 支持自定義組件庫整體主題風格。通過在項目中重置一些樣式變量的值，可輕而易舉的實現組件換膚。

按需加載

NutUI 1.x 的按需加載是通過自定義構建的方式來實現的，雖可滿足需求，但是讓用戶每次都進 node_modules 目錄下找到 NutUI 項目目錄安裝依賴，再進行自定義構建多有不便。於是 2.0 版我們對按需加載功能進行了重新設計。

使用 NutUI 2.0 的組件時，不必導入完整的組件庫，直接在項目中引入我們需要的組件文件及其對應的樣式文件即可。如：

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';

不需要再進行自定義構建了，比 NutUI 1.x 方便不少吧。如果你覺得這種方式還不夠方便或者不夠優雅，也沒關係，通過我們提供的 webpack 插件 @nutui/babel-plugin-separate-import ，還可以支持 ES6module 風格的按需加載寫法，且兼容不支持 ES6module 語法的瀏覽器：

import { Button, Icon } from '@nutui/nutui';

安裝插件也麻煩？不妨試試我們提供的一個 Vue 項目的構建工具 Gaea-cli，它可以生成一個已內置了這個插件的 Vue 模板工程，你可以直接基於這個工程開發項目。另外，這個構建工具還有很多高級功能，以及針對我廠開發環境進行的特定優化，此前的系列版本已經過數十個項目的驗證，推薦大家使用。

國際化

NutUI 2.0 開始支持多語言。組件默認使用中文，可加載其他語言包來實現多語言切換功能。如果你的項目中已經使用了目前 Vue 生態裏特別流行的國際化插件 vue-i18n 來實現項目的國際化功能，那麼在使用 NutUI 2.0 組件的時候，也完全不需要擔心，NutUI 2.0 的國際化功能是完全兼容 vue-i18n 插件的。

SVG圖標

我們認爲移動端組件庫圖標方案的最佳實踐是 SVG 方案，因爲 SVG 圖標較字體圖標更靈活，更利於按需加載，也不會招致部分瀏覽器對其進行抗鋸齒處理，清晰度高，結合 symbol 元素還可以實現 SVG 圖標的複用。SVG 圖標在移動端的兼容性也是良好的。我們在 NutUI 1.x 時期就選擇了 SVG 作爲組件庫的圖標方案，而這種選擇在 NutUI 2.0 版本獲得了傳承。

除了上述幾點，NutUI 2.0 還有支持 Typescript，支持 SSR 服務端渲染等特性。

全新架構

NutUI 2.0 基於全新的架構開發，並非基於 1.0 的架構升級而來。我們結合 1.0 的架構經驗、2.0 的功能需求、工具的新變化、我廠的開發環境、主流優秀組件庫的實現方案等因素，全新打造了 2.0 的架構。架構方面主要有以下特點：

• 基於 Webpack4.0 開發，擁有更快的構建速度，輸出更小的 bundle 文件

• 一次性構建出多種類型的 bundle，兼容各種主流模塊化場景和非模塊化引用場景

• 基於 Babel7 實現了 Polyfill 的智能加載，無須額外引入 Babel-polyfill 文件也可兼容低版本瀏覽器

• 集成 Carefree 方案，大幅提升我廠開發環境的真機調試效率

• Markdown 格式的文檔便於書寫和 Github 閱讀，基於 MD 文件自動生成文檔網站

• 示例頁面 PWA 加持，支持離線緩存和創建主屏圖標

• 接入持續化集成和自動化測試，提升代碼可靠性

• 支持自動生成新組件模板

• 配套一個 webpack 插件和一個 Vue 模板工程構建工具

• …

  
  

組件

組件庫是個舞臺，臺上的主角不是組件庫的功能和架構，而是組件。我們在組件開發上下了不少功夫，精心挑選和打磨了一批組件。NutUI 2.0 一期擁有組件三十多個，涉及“基礎”、“佈局”，“數據錄入”、“操作反饋”、“數據展示”、“導航”6大類。

接下來，我們會集中精力繼續新增一批組件，同時也會跟進對現有組件的打磨和維護。大家有什麼通用組件的需求也可以反饋給我們。

跨平臺

NutUI 2.0 還有一個重磅功能 —— 支持將 Vue 組件轉成微信小程序組件，從而實現一次編碼跨平臺使用。目前這個功能仍在加緊開發中，稍後上線，盡請期待哦。

參與開發

歡迎感興趣的小夥伴參與 NutUI 項目的開發，我們建議通過提 pull request 的方式參與。如果要修一個 bug，請提交 pull request 到 master 分支；如果你要提一個新增功能或組件的 pull request，那麼請基於 v2 分支，通過 Code Review 之後，我們會合並你的代碼。

NutUI 2.0 組件庫沒有埋任何彩蛋，大家儘管放心使用哦~

• 官網：
  https://nutui.jd.com

• Github倉庫：
  https://github.com/jdf2e/nutui/

• 更新日誌：
  https://github.com/jdf2e/nutui/releases

本文分享自微信公衆號 - 架構真經（gentoo666）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。