移動(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í)版。
NutUI 官網(wǎng)同步進(jìn)行了改版夭织，也歡迎大家訪問(wèn) https://nutui.jd.com ( PC 端)吭露。
我們來(lái)看看 NutUI 2.0 有哪些重要的新特性。
京東APP 7.0 視覺(jué)風(fēng)格
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)的，雖可滿足需求壶笼，但是讓用戶每次都進(jìn) node_modules 目錄下找到 NutUI 項(xiàng)目目錄安裝依賴啄育，再進(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)格的按需加載寫法，且兼容不支持 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)證螺男，推薦大家使用。
國(guó)際化
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 插件的句惯。
SVG圖標(biāo)
我們認(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ù)端渲染等特性详恼。
全新架構(gòu)
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)建出多種類型的 bundle，兼容各種主流模塊化場(chǎng)景和非模塊化引用場(chǎng)景
- 基于 Babel7 實(shí)現(xiàn)了 Polyfill 的智能加載赫冬，無(wú)須額外引入 Babel-polyfill 文件也可兼容低版本瀏覽器
- 集成 Carefree 方案浓镜，大幅提升我廠開(kāi)發(fā)環(huán)境的真機(jī)調(diào)試效率
- Markdown 格式的文檔便于書寫和 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)，我們會(huì)集中精力繼續(xù)新增一批組件猪腕，同時(shí)也會(huì)跟進(jìn)對(duì)現(xiàn)有組件的打磨和維護(hù)冗澈。大家有什么通用組件的需求也可以反饋給我們。
跨平臺(tái)
NutUI 2.0 還有一個(gè)重磅功能 —— 支持將 Vue 組件轉(zhuǎn)成微信小程序組件陋葡，從而實(shí)現(xiàn)一次編碼跨平臺(tái)使用亚亲。目前這個(gè)功能仍在加緊開(kāi)發(fā)中，稍后上線腐缤，盡請(qǐng)期待哦捌归。
參與開(kāi)發(fā)
歡迎感興趣的小伙伴參與 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)有埋任何彩蛋角塑，大家盡管放心使用哦~
