京東跨端組件庫(kù) NutUI 2.0 來(lái)襲
點(diǎn)擊“開(kāi)發(fā)者技術(shù)前線”，選擇“星標(biāo)??”
讓一部分開(kāi)發(fā)者看到未來(lái)
來(lái)源：授權(quán)轉(zhuǎn)載自京東技術(shù) | 責(zé)編：可可
今天帶來(lái)的是一款京東的移動(dòng)端 Vue 組件庫(kù)，移動(dòng)端 Vue 組件庫(kù) NutUI 自發(fā)布以來(lái)受到了廣泛的關(guān)注。據(jù)不完全統(tǒng)計(jì)，目前至少有30多個(gè)京東的 web 項(xiàng)目正在使用 NutUI 。
經(jīng)過(guò)一段時(shí)間緊鑼密鼓的開(kāi)發(fā)，近期，我們正式發(fā)布了 NutUI 的 2.0 版。NutUI 2.0 定位于一個(gè)京東風(fēng)格的移動(dòng)端精品組件庫(kù)，并不是 NutUI 1.x 的簡(jiǎn)單升級(jí)版。
（手機(jī)掃描二維碼可以體驗(yàn) NutUI 2.0 的組件示例）
NutUI 官網(wǎng)同步進(jìn)行了改版，也歡迎大家訪問(wèn) https://nutui.jd.com ( PC 端)。
我們來(lái)看看 NutUI 2.0 有哪些重要的新特性。
NutUI 2.0 的組件在開(kāi)發(fā)時(shí)參考了京東APP 7.0 視覺(jué)規(guī)范，統(tǒng)一了視覺(jué)風(fēng)格和動(dòng)效。
如果與你需要的風(fēng)格有差異，還可以通過(guò)增加一個(gè)自定義 class 來(lái)調(diào)整樣式。如果差異較大，甚至可以替換掉整個(gè)組件的默認(rèn)樣式文件。你的組件，你做主。
NutUI 2.0 支持自定義組件庫(kù)整體主題風(fēng)格。通過(guò)在項(xiàng)目中重置一些樣式變量的值，可輕而易舉的實(shí)現(xiàn)組件換膚。
NutUI 1.x 的按需加載是通過(guò)自定義構(gòu)建的方式來(lái)實(shí)現(xiàn)的，雖可滿足需求，但是讓用戶(hù)每次都進(jìn) node_modules 目錄下找到 NutUI 項(xiàng)目目錄安裝依賴(lài)，再進(jìn)行自定義構(gòu)建多有不便。于是 2.0 版我們對(duì)按需加載功能進(jìn)行了重新設(shè)計(jì)。
使用 NutUI 2.0 的組件時(shí)，不必導(dǎo)入完整的組件庫(kù)，直接在項(xiàng)目中引入我們需要的組件文件及其對(duì)應(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';
不需要再進(jìn)行自定義構(gòu)建了，比 NutUI 1.x 方便不少吧。如果你覺(jué)得這種方式還不夠方便或者不夠優(yōu)雅，也沒(méi)關(guān)系，通過(guò)我們提供的 webpack 插件 @nutui/babel-plugin-separate-import ，還可以支持 ES6module 風(fēng)格的按需加載寫(xiě)法，且兼容不支持 ES6module 語(yǔ)法的瀏覽器：
import { Button, Icon } from '@nutui/nutui';
安裝插件也麻煩？不妨試試我們提供的一個(gè) Vue 項(xiàng)目的構(gòu)建工具 Gaea-cli，它可以生成一個(gè)已內(nèi)置了這個(gè)插件的 Vue 模板工程，你可以直接基于這個(gè)工程開(kāi)發(fā)項(xiàng)目。另外，這個(gè)構(gòu)建工具還有很多高級(jí)功能，以及針對(duì)我廠開(kāi)發(fā)環(huán)境進(jìn)行的特定優(yōu)化，此前的系列版本已經(jīng)過(guò)數(shù)十個(gè)項(xiàng)目的驗(yàn)證，推薦大家使用。
NutUI 2.0 開(kāi)始支持多語(yǔ)言。組件默認(rèn)使用中文，可加載其他語(yǔ)言包來(lái)實(shí)現(xiàn)多語(yǔ)言切換功能。如果你的項(xiàng)目中已經(jīng)使用了目前 Vue 生態(tài)里特別流行的國(guó)際化插件 vue-i18n 來(lái)實(shí)現(xiàn)項(xiàng)目的國(guó)際化功能，那么在使用 NutUI 2.0 組件的時(shí)候，也完全不需要擔(dān)心，NutUI 2.0 的國(guó)際化功能是完全兼容 vue-i18n 插件的。
我們認(rèn)為移動(dòng)端組件庫(kù)圖標(biāo)方案的最佳實(shí)踐是 SVG 方案，因?yàn)?SVG 圖標(biāo)較字體圖標(biāo)更靈活，更利于按需加載，也不會(huì)招致部分瀏覽器對(duì)其進(jìn)行抗鋸齒處理，清晰度高，結(jié)合 symbol 元素還可以實(shí)現(xiàn) SVG 圖標(biāo)的復(fù)用。SVG 圖標(biāo)在移動(dòng)端的兼容性也是良好的。我們?cè)?NutUI 1.x 時(shí)期就選擇了 SVG 作為組件庫(kù)的圖標(biāo)方案，而這種選擇在 NutUI 2.0 版本獲得了傳承。
除了上述幾點(diǎn)，NutUI 2.0 還有支持 Typescript，支持 SSR 服務(wù)端渲染等特性。
NutUI 2.0 基于全新的架構(gòu)開(kāi)發(fā)，并非基于 1.0 的架構(gòu)升級(jí)而來(lái)。我們結(jié)合 1.0 的架構(gòu)經(jīng)驗(yàn)、2.0 的功能需求、工具的新變化、我廠的開(kāi)發(fā)環(huán)境、主流優(yōu)秀組件庫(kù)的實(shí)現(xiàn)方案等因素，全新打造了 2.0 的架構(gòu)。架構(gòu)方面主要有以下特點(diǎn)：
基于 Webpack4.0 開(kāi)發(fā)，擁有更快的構(gòu)建速度，輸出更小的 bundle 文件
一次性構(gòu)建出多種類(lèi)型的 bundle，兼容各種主流模塊化場(chǎng)景和非模塊化引用場(chǎng)景
基于 Babel7 實(shí)現(xiàn)了 Polyfill 的智能加載，無(wú)須額外引入 Babel-polyfill 文件也可兼容低版本瀏覽器
集成 Carefree 方案，大幅提升我廠開(kāi)發(fā)環(huán)境的真機(jī)調(diào)試效率
Markdown 格式的文檔便于書(shū)寫(xiě)和 Github 閱讀，基于 MD 文件自動(dòng)生成文檔網(wǎng)站
示例頁(yè)面 PWA 加持，支持離線緩存和創(chuàng)建主屏圖標(biāo)
接入持續(xù)化集成和自動(dòng)化測(cè)試，提升代碼可靠性
支持自動(dòng)生成新組件模板
配套一個(gè) webpack 插件和一個(gè) Vue 模板工程構(gòu)建工具
…
組件庫(kù)是個(gè)舞臺(tái)，臺(tái)上的主角不是組件庫(kù)的功能和架構(gòu)，而是組件。我們?cè)诮M件開(kāi)發(fā)上下了不少功夫，精心挑選和打磨了一批組件。NutUI 2.0 一期擁有組件三十多個(gè)，涉及“基礎(chǔ)”、“布局”，“數(shù)據(jù)錄入”、“操作反饋”、“數(shù)據(jù)展示”、“導(dǎo)航”6大類(lèi)。
接下來(lái)，我們會(huì)集中精力繼續(xù)新增一批組件，同時(shí)也會(huì)跟進(jìn)對(duì)現(xiàn)有組件的打磨和維護(hù)。大家有什么通用組件的需求也可以反饋給我們。
NutUI 2.0 還有一個(gè)重磅功能 —— 支持將 Vue 組件轉(zhuǎn)成微信小程序組件，從而實(shí)現(xiàn)一次編碼跨平臺(tái)使用。目前這個(gè)功能仍在加緊開(kāi)發(fā)中，稍后上線，盡請(qǐng)期待哦。
歡迎感興趣的小伙伴參與 NutUI 項(xiàng)目的開(kāi)發(fā)，我們建議通過(guò)提 pull request 的方式參與。如果要修一個(gè) bug，請(qǐng)?zhí)峤?pull request 到 master 分支；如果你要提一個(gè)新增功能或組件的 pull request，那么請(qǐng)基于 v2 分支，通過(guò) Code Review 之后，我們會(huì)合并你的代碼。
NutUI 2.0 組件庫(kù)沒(méi)有埋任何彩蛋，大家盡管放心使用哦~
官網(wǎng)：
https://nutui.jd.comGithub倉(cāng)庫(kù)：
https://github.com/jdf2e/nutui/更新日志：
https://github.com/jdf2e/nutui/releases
大廠面試題領(lǐng)取方式： 加下面助理的微信一定要備注（大廠面試）： 研究/工作方向+地點(diǎn)+學(xué)校/公司+昵稱(chēng) （如大前端+上海+上交+可可） 根據(jù)格式備注，可更快被通過(guò)且邀請(qǐng)進(jìn)群，領(lǐng)取一份專(zhuān)屬學(xué)習(xí)禮包
開(kāi)發(fā)者技術(shù)前線 ，匯集技術(shù)前線快訊和關(guān)注行業(yè)趨勢(shì)，大廠干貨，是開(kāi)發(fā)者經(jīng)歷和成長(zhǎng)的優(yōu)秀指南。
