View Design 全系產品升級至 Vue 3,併發布 View UI Plus 正式版

Aresn 發表於 2022-05-16
Vue

View Design 全系產品升級至 Vue 3,併發布 View UI Plus 正式版

品牌升級

我們可能是最後一個升級到 Vue.js 3 的元件庫,不過該來的早晚會來。

作為國內最早一批的 Vue.js 元件庫,View UI(即 iView)來到了它的第 6 年。這 6 年中,我們從開源逐步向商業化探索,沉澱技術、豐富生態、積累使用者。

由於整個生態的產品線眾多,本次我們設計了全新的品牌:View Design。當然,還是熟悉的網址和 Logo:

https://www.iviewui.com

View Design 全系產品升級至 Vue 3,併發布 View UI Plus 正式版

產品線

View Design 目前主要包含以下產品線:

View UI Plus

View UI Plus 是 View Design 的核心 UI 元件庫,完全開源和免費。本次升級至 Vue.js 3,保留了原 View UI 幾乎全部的 API(部分由於 Vue 3 被迫改動,如 value -> model-value 等),所以在使用和體驗上,可以說和 View UI 幾乎一致,除了 Vue.js 3 規定的 API 升級外,你幾乎不用修改 View UI Plus 在使用上的 API(具體以文件為準)。

為了便於您快速上手開發,我們免費提供了兩套工程,可以為您省去大量配置和除錯環境的時間:

本次升級,我們還 新增了 30+ 元件,比如 TreeSelect(樹選擇)、City(城市選擇器)、Login(登入)、Notification(通知選單)、Calendar(日曆)等。

View UI Plus 有近 100 個元件,數量龐大,升級工作也是巨大的。我們對全部元件逐一進行了升級、測試,部分元件進行了重構(如 Select),確保了官網所有示例均正常執行,所有文件也校對了 3 遍。

我們廢棄了 v-transfer 指令,而是使用 Vue 3 內建的 <teleport> 元件。

因為升級到了 Vue 3,你可以選擇熟悉的 選項式 API(Options API) 或全新的 組合式 API(Composition API)進行開發。

也是因為升級到了 Vue 3,View UI Plus 不再相容 IE 瀏覽器

其它一些內容,值得注意:

  • 同時支援 ESM、CJS、UMD 和全域性變數(ViewUIPlus,用於 CDN 引用);
  • 支援多語言及最新的 vue-i18n 外掛;
  • 支援按需引用;
  • 支援元件全域性配置,如 size、transfer 等;
  • 支援自定義主題。

接下來,我們會盡快完善以下內容:

  • 所有元件的 TS 定義檔案;
  • unplugin-vue-components 的支援;
  • 新版的 Playground;
  • SSR 的支援;
  • Electron 的支援等。

Admin Plus

View Design 全系產品升級至 Vue 3,併發布 View UI Plus 正式版

Admin Plus 是一套企業級的通用型中後臺前端解決方案,它基於 View UI Plus,適用於 Vue.js 3。Admin Plus 是我們的商業化產品之一,閉源、收費。

線上預覽地址:https://adminplus.iviewui.com

Admin Plus 使用最前沿的前端技術棧,支援各型別產品,比如典型的中後臺應用(類阿里雲後臺、七牛雲後臺,各類 to B 產品)、社群型應用(類知乎、論壇、門戶)(需使用社交佈局。檢視社交佈局)、地圖型應用(需使用地圖佈局。檢視地圖佈局)、工作桌上型應用(需使用工作桌面佈局。檢視工作桌面佈局)等。

其核心產品特點有:

  • 豐富的佈局模式可選擇,佈局和功能具有高可配性;
  • 支援頂欄選單和側邊欄選單(側邊選單自動響應頂欄選單變化);
  • 支援動態選單(深度優化,支援實時更新動態選單資料);
  • 強大的鑑權系統,對路由、選單、功能點等支援 6 種鑑權模式,滿足不同的業務鑑權需求,詳見文件鑑權
  • 強大的國際化(多語言)方案,深度優化支援瀏覽器標題、選單、元件、內容,自動判斷語言,支援實時生效和重新整理頁面雙模式,支援遠端載入多語言檔案;
  • 支援全域性水印,可動態更新水印內容;
  • 全響應式支援,所有頁面及功能點對 PC 端、移動端、平板電腦均有不同的顯示效果;
  • 含有大量典型的業務示例,包括 使用者管理選單許可權管理角色許可權管理
  • 漂亮的 UI、極致的使用者體驗和細節處理;
  • 優質的售後技術支援,完善的文件。

iCRUD

View Design 全系產品升級至 Vue 3,併發布 View UI Plus 正式版

iCRUD 是一套基於 View UI Plus 的增強型表格元件,面向配置開發,快速搭建具備 增、刪、改、查 功能的表格頁面。支援 Vue.js 3。iCRUD 也是我們的商業化產品之一,閉源、收費。

線上預覽地址:https://icrud.iviewui.com

其核心產品特點有:

  • 面向配置的開發模式,且提供了三個不同維度的配置,開發簡單快速,省去大量業務程式碼;
  • 支援 View UI Plus Table 元件的全部功能;
  • 支援 vxe-table,及大資料量渲染、大資料量樹形資料等。
  • View UI Plus 的 Form 元件全面覆蓋(17+);
  • 支援本地和遠端的資料字典,且自動快取;
  • 支援多種表格資料渲染及檢視渲染方式,且針對 17+ Form 類元件深度優化顯示效果;
  • 擴充套件的多選模式,支援非同步跨頁資料多選,支援批量刪除資料;
  • 支援匯出表格資料,支援列印表格,支援調整列順序、列顯/隱等功能;
  • 移動端響應式設計。

後記

6 年以來,我們不斷地對產品進行打磨,深度瞭解 B 端客戶的需求,目的是將 View Design 打造為最好看且最好用的產品。我們認真審視每一個 UI 細節,思考每一個 API 的設計,為的就是讓客戶儘可能降低使用成本,做出跟 View Design 一樣漂亮的系統。

接下來,View Design 團隊將固定、持續對全部產品線進行迭代和維護。我們也會陸續以文章、直播等形式與大家交流更多的技術細節。敬請關注!