京東 Vue3 元件庫支援小程式開發啦！
原始碼搶先看： https://github.com/jdf2e/nutui
NutUI 3.0 官網：https://nutui.jd.com/3x/#/
小程式多端適配
設計初衷
在跨端小程式的開發過程中，我們發現沒有合適的元件庫可以使用，尤其在做電商商城類場景的業務時，沒有符合京東 App 規範的元件庫為我們的小程式專案提供支援。為了填補這一空白，同時讓 NutUI 元件庫能夠為更多的開發者帶來便利，我們決定在 NutUI 3.0 中 增加小程式多端適配的能力。
如何適配
Taro 在小程式跨端開發中有著出眾的表現，Taro 3x 在 2020年11月也宣佈支援了 Vue3，所以我們可以採用 Taro + Vue 的技術棧來達到在小程式中適配多端的目的。
Taro 的特點可以如下：
- 可以實現微信小程式原生程式碼轉換到微信平臺，百度平臺等；
- Taro 框架是唯一一款實現京東小程式適配的框架；
- 支援 React/Vue 語法，更好地支援元件化和 TypeScript；
- 行業影響力大，社群活躍，長期支援有保障；
- 支援多端同步除錯、能夠適配主流小程式
若能將 Taro 的這些特點與能力新增到 NutUI 元件庫中，實現彼此功能打通，就可以實現 NutUI 元件庫跨端開發小程式的夢想。在團隊大牛的帶領下，小夥伴們不眠不休，進行著反覆的嘗試與探索，提煉出適配方法，從易到難有如下四點：
- Taro 自相容：現有的 3.0 元件中 checkbox、radio 及 steps 等 9 個元件可直接在 Taro 中使用。
- 樣式適配：兩端的樣式及 css 選擇器有一些區別，需要做針對性處理。
- DOM API 的差異化處理：獲取元素的方法不同，會導致元件在 Taro 端的功能失效，對於這類元件需要在 DOM 獲取層面上進行調整。
- 深度適配：這也是工作量最大一部分，需要呼叫 Taro 或微信原生能力對元件進行重寫。如 picker、swiper 及 backtop 等互動較為複雜的元件，我們要在 Taro 等的基礎上做一層封裝來達到適配的目的。
針對每個元件，我們在原有元件的目錄結構中新增.taro.vue檔案來專門處理 Taro 相容。針對 demo 和 文件，我們在官網文件處增加了頁籤切換，來方便檢視不同環境下的使用方法以及對應的 demo。
當然，如果您想在小程式環境下檢視效果的話，除了官網 demo 會展示二維碼之外，您還可以 copy 我們專案中的 mobile-taro 下的 vue 目錄，啟動後可以檢視效果。
使用方式
引入NutUI，即可在專案中使用。
# Vue3 專案
npm i @nutui/nutui@next -S
# NutUI 小程式多端專案
npm i @nutui/nutui@taro -S
關於 NutUI 3.0
技術看點：
1. 擁抱 Vue3
引入 Vue3 新特性 Composition API、Teleport、Emits 等
破壞性變更，全面升級
採用組合式 API Composition 語法重構，結構清晰，功能模組化
元件 emits 事件單獨提取，增強程式碼可讀性
使用 Teleport 新特性重構掛載類元件
2. 構建工具升級為 Vite 2.x
棄用 webpack，引入下一代前端構建工具 Vite。啟動速度由原來 30s 提升到 500ms 左右，將大幅提升開發效率。
3. 全面使用 TypeScipt
NutUI 3.0 使用 TypeScript 作為主要開發語言，在前端應用複雜度不斷飆升的大背景下，應對元件不易維護且難於擴充套件的問題。
視覺體驗全面升級
NutUI 3.0 根據最新發布的 JD App 10.0 規範，結合零售眾多的應用場景，對 NutUI 元件進行重新整理和設計
- 減少冗餘控制元件
- 幫助移動端設計師快速復⽤基礎元件
- 建立通⽤的細節設計標準
- 提高界⾯的模組化通用程度
- 建⽴設計與開發對接的基礎標準
- 提⾼產研輸出對接的效率，降低輸出工作量
- 基於京東設計語言體系，構建場景
- 骨骼精細化重構主流程，構建“場景動線”，讓體驗更流暢
問卷調研
為了給您提供更好的服務，希望您能抽出幾分鐘時間，將您的感受和建議告訴我們，我們會對您的填答資訊嚴格保密。本次調研為有獎調查，完整填答問卷的使用者可抽取京東joy周邊禮品。
問卷連結：https://get.jd.com/#/survey/index?id=60280
釋出時間
NutUI 3.0 「小程式多端適配」功能 預計釋出的時間是 2021/07/12 。
使用 NutUI 輕鬆開發小程式，你心動❤️ 了嗎，敬請期待o！
[來點個 Star ❤️ 支援我們一下吧 ~](