作為一款具有京東風格的組件庫,我們一直致力於用心打造更符合開發者體驗的組件庫。NutUI 3.0 上線后我們研發團隊也在不斷的優化、測試、使用、迭代 Vue3 的相關組件,但是在跨端小程序的開發過程中,發現沒有合適的組件庫可以支持多端開發。為了填補這一空白,同時為了優化開發者體驗,讓 NutUI 能夠為更多的開發者帶來便利,我們決定在 NutUI 中增加小程序多端適配的能力。
NutUI 開啟多端之旅
當前業務環境下,研發面臨的當前的業務場景越來越復雜,產品發布的渠道越來越多,業務在擁有自己 APP 的同時出現了很多小程序渠道,以前研發只需要關注到業務的 APP 和 H5 就好,自從微信產出了微信小程序后,業界各大互聯網公司都研發出自己的小程序平台,而且以后可能會愈來愈多,每個小程序平台都有自己的框架語言,如果業務多發布一個渠道,研發就要多寫一套代碼,在業務的渠道變多而研發資源匱乏的情況下,寫一套代碼可以快速復用到各個小程序是研發當前的首要痛點。
為了給開發者提供更高效便捷的開發方式,NutUI 和 Taro 合力,現已可以用 NutUI 開發小程序了,NutUI 提供了30+ 組件涵蓋了日常業務開發使用的大部分組件。
二者的結合,不僅可以讓開發者一處代碼,多端運行,暢快自如地開發小程序。更可以在開發過程中,使用到更美觀、更便捷、組件更豐富的組件庫。我們將 NutUI 和 Taro 更完美地接合到一起,Taro 官方將 NutUI 作為 Vue技術棧的推薦組件庫。現在開發者將可以使用 NutUI 無縫開發 H5 和多端小程序。
NutUI 3.0 全新架構升級
NutUI 3.0 升級以來,我們對框架進行了一些變更,下面是 NutUI 3.0 的基本框架結構,相比 2.0 我們做出了以下升級:
- Webpack 升級為 Vite ,開發效率大幅提升
- 全面擁抱 TypeScript
- Vue3支持
- 支持小程序開發
視覺體驗全面升級
官網煥然一新
NutUI 從 2.0 到 3.0 不僅是技術上的全新升級,組件庫產品形象也煥然一新,NutUI 3.0 從官網到文檔再到 Demo 等我們都進行了改版。改版后的首頁,從多維度展示 NutUI 組件庫的平台特點和知識沉淀,對於新用戶可以更好且系統性的了解 NutUI 。
組件文檔變化
在用戶時間注意力稀缺的時代,作為一個工具型的平台,更需要便捷高效的幫助用戶實現目標。我們在文檔頁右上角加上了切換文檔的 Tab,這樣開發者可以更高效率的找到自己想要的相關文檔,我們現在已經支持小程序預覽 Demo 了,掃描右側二維碼可以直接查看 NutUI 3.X 組件庫的小程序 Demo。
快速上手小程序開發
安裝
- 通過 Npm 或 Yarn 安裝
安裝 Taro 腳手架
# 使用 npm 安裝 CLI
npm install -g @tarojs/cli
# OR 使用 yarn 安裝 CLI
yarn global add @tarojs/cli
# OR 安裝了 cnpm,使用 cnpm 安裝 CLI
cnpm install -g @tarojs/cli
!!! 值得一提的是,如果安裝過程出現sass相關的安裝錯誤,請在安裝 mirror-config-china 后重試。
npm install -g mirror-config-china
檢查是否安裝成功
taro -v
項目初始化
使用命令創建模板:
taro init myApp
按照下方圖片依次選擇,選擇 Vue3 + NutUI 模板
選擇vue3-NutUI的模板時,內置了按需加載的使用方式,開發者可根據自己的使用場景選擇全局使用。
按需加載使用示例(推薦使用方式)
import { createApp } from "vue";
import App from "./App.vue";
import { Button, Cell, Icon } from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";
createApp(App).use(Button).use(Cell).use(Icon);
全局使用示例
import { createApp } from "vue";
import App from "./App.vue";
import NutUI from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";
createApp(App).use(NutUI);
注意:這種方式將會導入所有組件
通過以上方式,即可快速開發小程序場景。 NutUI 團隊會持續迭代多端功能,讓開發者可以擁有更友好的多端開發體驗。
未來展望
隨着 NutUI 的用戶群體越來越多,React 版本的呼聲越來越高,我們接下來會將部分的精力投入到 React 技術棧開發中,NutUI-React 將會在 Q4 與大家見面;我們會對 NutUI 的產品體驗進行不斷優化和迭代,在 Vue 的版本上 NutUI 團隊將會持續不斷的豐富組件;為了滿足大部分開發者在使用組件時需要給上游設計師提供組件規范,我們正在進行 NutUI 設計規范的輸出和整理,不久就會在官網上線 Sketch 資源包,盡情期待~
問卷調研
為了給您提供更好的服務,希望您能抽出幾分鍾時間,將您的感受和建議告訴我們,我們會對您的填答信息嚴格保密。本次調研為有獎調查,完整填答問卷的用戶可抽取京東joy周邊禮品。
問卷鏈接:https://get.jd.com/#/survey/index?id=60280