NutUI 是一套來自京東用戶體驗設計部（JDC）前端開發部的移動端 Vue 組件庫，NutUI 1.0 版本于 2018 年發布。據不完全統計，目前在京東至少有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 '@nutui/nutui/dist/packages/button/button.css';import Switch from '@nutui/nutui/dist/packages/switch/switch.js';import '@nutui/nutui/dist/packages/Switch/switch.css';

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

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 的架構。架構方面主要有以下特點：

• 基于 Webpack 4.0 開發，擁有更快的構建速度，輸出更小的 bundle 文件；

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

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

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

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

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

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

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

• 配套一個 webpack 插件和一個 Vue 模板工程構建工具（Gaea 4.0)；

• …

組件

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

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

跨平臺

根據開發規劃，NutUI 2.0 還會有一個重磅功能 —— 支持將 Vue 組件轉成微信小程序組件，實現一次編碼跨平臺（H5和微信小程序）使用，屆時 NutUI 將由一個 Web 端 Vue 組件庫升華為一個多終端跨平臺組件庫。目前，這個功能仍在加緊開發中，稍后上線，敬請期待。

參與開發

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

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

鏈接

• 官網(PC端)：https://nutui.jd.com

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

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

• 反饋建議：https://github.com/jdf2e/nutui/issues

• NutUI按需加載插件：
  https://www.npmjs.com/package/@nutui/babel-plugin-separate-import

• Vue模板工程構建工具：https://www.npmjs.com/package/gaea-cli

• 不依賴wifi熱點的H5真機測試工具Carefree: https://carefree.jd.com/

• 聯系我們：nutui@jd.com

更多內容，請關注前端之巔。

會議推薦

2019年6月，GMTC全球大前端技術大會2019即將到來。小程序、Flutter、移動AI、工程化、性能優化…大前端的下一站在哪里？點擊下圖了解更多詳情。