移動端 vue 元件庫 nutui 自發布以來受到了廣泛的關注。據不完全統計，目前至少有30多個京東的 web 專案正在使用 nutui 。
經過一段時間緊鑼密鼓的開發，近期，京東正式發布了 nutui 的 2.0 版。nutui 2.0 定位於乙個京東風格的移動端精品元件庫，並不是 nutui 1.x 的簡單公升級版。
我們來看看 nutui 2.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';
import from '@nutui/nutui';nutui 2.0 開始支援多語言。元件預設使用中文，可載入其他語言包來實現多語言切換功能。如果你的專案中已經使用了目前 vue 生態裡特別流行的國際化外掛程式 vue-i18n 來實現專案的國際化功能，那麼在使用 nutui 2.0 元件的時候，也完全不需要擔心，nutui 2.0 的國際化功能是完全相容 vue-i18n 外掛程式的。
我們認為移動端元件庫圖示方案的最佳實踐是 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 的架構。架構方面主要有以下特點：
元件庫是個舞台，台上的主角不是元件庫的功能和架構，而是元件。我們在元件開發上下了不少功夫，精心挑選和打磨了一批元件。nutui 2.0 一期擁有元件三十多個，涉及「基礎」、「布局」，「資料錄入」、「操作反饋」、「資料展示」、「導航」6大類。
接下來，我們會集中精力繼續新增一批元件，同時也會跟進對現有元件的打磨和維護。大家有什麼通用元件的需求也可以反饋給我們。
歡迎感興趣的小夥伴參與 nutui 專案的開發，我們建議通過提 pull request 的方式參與。如果要修乙個 bug，請提交 pull request 到 master 分支；如果你要提乙個新增功能或元件的 pull request，那麼請基於 v2 分支，通過 code review 之後，我們會合併你的**。
nutui 2.0 元件庫沒有埋任何彩蛋，大家儘管放心使用哦~
Vant 移動端Vue元件庫的使用
1 通過 npm 安裝 2 npm i vant s3 通過 yarn 安裝 4 yarn add vant1 方式一 按需引入 安裝外掛程式 npm i babel plugin import d 先在.babelrc 中新增配置 在babel.config.js檔案裡寫進去下面這些 module...
京東移動端元件庫 React 版如約而來
京東零售開源專案 nutui 是一套京東風格的輕量級移動端元件庫，開發和服務於移動 web 介面的企業級產品。隨著 nutui 的使用者越來越多，社群 裡對 react 版本的呼聲也越來越高。我們響應社群的呼聲，2021 年 6 月開始規劃並啟動 react 版的開發。經過長時間的研發與打磨，rea...
vue移動端專案vant元件庫之image
main.js import from vant vue.use lazyload 頁面路由元件 pd30 h3 style width 160px height 110px src h3 width 100 height 100 src h3 width 100 height 100 fit co...