NutUI 4.0 正式釋出！

NutUI 4.0 Github 地址：github.com/jdf2e/nutui
NutUI 4.0 官網：nutui.jd.com

前言

技術日異月新、發展創新、持續的迭代已成為常態。NutUI 雖經過 v1.0、v2.0、v3.0 三次技術蛻變，仍面臨很多相容、破壞性調整的需求。隨著我們自身承接業務的多樣性變化及社群訴求日漸增多，大調整和升級勢在必行，經過團隊及社群開發者 3 個多月的開發和自測，在 2023 辭舊迎新之際我們正式釋出 NutUI 4.0。

NutUI 4.0 帶來了 CSS 動態主題、icon 圖示庫、自動按需引入、新增元件、更輕量的使用者體驗，圍繞元件豐富性、輕量化、易用性力求將元件的質量和體驗提升一個臺階。

新功能

CSS Variables 動態主題

NutUI 4.0 新增 CSS Variables 動態主題，在專案執行時，透過 CSS 變數覆蓋預設樣式，完成定製主題、動態切換主題、暗黑模式等換膚功能，提升產品易用性。

CSS Variables 本質是一系列的樣式屬性，預設值被定義在 :root 節點上，與 NutUI 3 的定製主題、線上主題定製功能相比，使用者無需新建自定義 Scss 變數檔案，只需透過 ConfigProvider 元件實現實時動態主題切換，使用方式更加簡潔、靈活。

<script setup lang="ts">
  const themeVars = reactive({ buttonBorderRadius: '10px' });
</script>
<template>
    <nut-config-provider :theme-vars="themeVars">
      <nut-button type="primary">主要按鈕</nut-button>
    </nut-config-provider>
</template>

NutUI 4.0 保留原有的主題定製、線上主題定製功能，開發中根據專案的實際需求進行綜合考量，按需選取適合業務場景的換膚方式。

專屬圖示庫

NutUI 4.0 新增專屬圖示庫。@nutui/icons-vue H5 圖示包與 @nutui/icons-vue-taro Taro 圖示包，專屬圖示庫是將原 NutUI Icon 元件剝離，從而減少 NutUI 包體積 464kB，提升了輕量化體驗。

專屬圖示庫保持京東風格，使用方式包括 IconFont 全量引入，新增 SVG 按需引入方式。

按需使用

import { Add } from '@nutui/icons-vue';
<Add color='red'>

全量使用

import { IconFont } from '@nutui/icons-vue';
<IconFont name="dongdong"></IconFont>

隨著專屬圖示庫的誕生，NutUI 4.0 中所有元件內建圖示的使用方式也發生了變化，都可以透過插槽進行自定義，圖示樣式、大小、顏色均由開發者配置，靈活度大幅提升。

<template>
  <nut-navbar title="訂單詳情">
      <template #right>
        <ShareN width="16px" color='#fff'></ShareN>
      </template>
  </nut-navbar>
</template>
<script>
  import { ShareN } from '@nutui/icons-vue';
</script>

自動按需引入

NutUI 4.0 新增更高效的自動按需引入方式。透過 unplugin-vue-components 實現按需引入，移除 babel-plugin-import、vite-plugin-style-import 外掛。

與 babel-plugin-import、vite-plugin-style-import 相比，unplugin-vue-components 支援在 Vite、Webpack、Vue CLI 等專案中自動引入元件，按需引入樣式也不再強依賴於 babel，開發者可以選擇 SWC、esbuild 等其他效率更高的編譯工具，進而提升編譯效率，Taro 小程式的開發體驗也隨之提升。

為了適配 unplugin-vue-components 外掛，NutUI 4.0 對部分元件的名稱與使用方式進行了調整

nut-fixednav -> nut-fixed-nav
nut-checkBoxgroup -> nut-checkBox-group
... ...

更多元件名稱調整可參考官網從 v3 升級到 v4。

元件更完善

NutUI 4.0 除新增功能外，也加強了元件的易用性、豐富性，力求元件更高效、涵蓋更多的業務場景。

新元件

NutUI 4.0 新增 2 個元件，為 NutUI 注入"新鮮血液"。

我們堅信 80 絕對不是元件庫的數量極限，挖掘更多新元件，讓元件庫更豐富，是我們持續不斷在做的事情。

Tour
新增 Tour 元件，用於引導使用者瞭解產品功能。

PullRefresh
新增 PullRefresh 元件，用於下拉重新整理的互動操作。

易用性提升

NutUI 4.0 對 20+ 個元件做了破壞性變更，提升元件靈活度、複用率、擴充套件性。

NutUI 致力於打造一款好用的元件庫，4.0 期間對元件進行深度最佳化改造，諸如功能設計不合理、靈活度不高、場景覆蓋不全、擴充套件性不強等問題。

ShortPassword 不再依賴原生鍵盤，Demo 演示中鍵盤替換為 Numberkeyboard 元件，自由組合使用，靈活度更高
精簡 Input 元件 Props ，使其具備與 Form 元件互相搭配使用的能力，提升元件複用率
InfiniteLoading 元件刪除下拉重新整理功能，元件功能定位更加清晰，功能更加純粹
Picker 元件刪除內建 Popup 功能，平鋪展示，滿足更多的使用場景。同時也修改基於 Picker 派生出的 DatePicker 元件。
... ...

更多元件 API 調整可參考官網從 v3 升級到 v4

輕量化

NutUI 一直以來以輕量化為核心理念，在元件體積、NPM 依賴、構建產物等方面持續進行最佳化。相較於 NutUI 3.3.1，NutUI 4.0 的安裝體積由 14MB 下降至 8MB，減少 42%。

注：上述資料來自於 packagephobia

NutUI 4.0 在包體積上也有了明顯的下降，由 3.81MB 下降至 2.3MB，減少 39%。

元件瘦身

NutUI 4.0 對 10+ 個元件進行了最佳化，透過重構、邏輯修改、公共函式提取等方式，不僅加強了元件的健壯性，提高擴充套件性，也使 NutUI 的壓縮前體積減少了 50kB。

Popover 元件進行重構，去掉第三方依賴包，實現 0 外部依賴
最佳化 H5 與 Taro 共同需要編譯函式，實現每端程式碼包的每行程式碼都是不可或缺的
提取公共函式 5 個，減少冗餘程式碼
... ...

圖示瘦身

NutUI 4.0 新增專屬圖示庫，不僅安裝包體積減少 595kB。

同時，NutUI 4.0 刪除 125 個字型圖示的 font 檔案，包體積減少 464kB。

另外，專屬圖示庫提供按需引入方式，在使用了 NutUI 的專案打包時，也只會引入元件內建圖示，不會全量引入，專案包體積平均減少 50+ kB。

副作用清除

NutUI 4.0 最佳化打包策略，nutui.es.js 由全量引入改為按需載入，其檔案體積由 624kB 下降至 11.9kB，減少 612kB。同時，避免了副作用的產生。

技術升級

NutUI 4.0 進行了底層架構升級來支撐不斷加入的新功能，共建亦有全新體驗。

構建工具升級
NutUI 4.0 將底層構建工具從 Vite 2 升級到 Vite 4，構建時間減少了 10 秒
庫型別宣告升級
NutUI 4.0 開始，不在使用第三方外掛 vite-plugin-dts，改用 vue 官方推薦的 vue-tsc 生產型別宣告檔案。同時，與 Volar 外掛兩者結合實現檢查型別錯誤能力。

未來

NutUI 發展至今，我們一直在學習一直在思考，除了提供更加豐富的元件、最佳化現有元件外，還需要做哪些事情才能服務到更多的開發者，真正做到高效、靈活、好用。

NutUI 作為移動端元件庫，4.0 開始會分為 基礎元件 與 高階元件 兩個方向。針對基礎元件，開發方向拆分為 H5、小程式、APP，豐富更多的 “端” 需求。

在過去，NutUI 沉澱了大促域與抽獎域高階元件庫，在 NutUI 4.0 迭代同時，我們總結過往開發業務元件的經驗，梳理並推出商城域業務元件，包括商品類、優惠券類、訂單類、發票類共計出 20+ 個高階元件。目前正緊張開發中，不久將與大家見面，敬請賜候~

最後

NutUI 的持續迭代離不開使用者和開發者的長期反饋和支援，特別感謝本次為 NutUI 4.0 做出貢獻的社群開發者：@Coffee-C、@gyt95、@jxt776、@kasonyang、@mikasayw、@sjx12、@thx125、@xiaosifeng。願大家在開源的道路上步履不停~

大家在開發中遇到任何問題，可以在 GitHub 或咚咚交流群（82957939）與我們聯絡，或者郵件至 nutui@jd.com，也歡迎大家為 NutUI Star。

相關連結：