1. 程式人生 > 其它 >NutUI 3.1 正式釋出:開啟多端開發之路

NutUI 3.1 正式釋出:開啟多端開發之路

作為一款具有京東風格的元件庫,我們一直致力於用心打造更符合開發者體驗的元件庫。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

連結