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

Aresn發表於2022-05-16
ViewVueUI

品牌升級

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

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

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

https://www.iviewui.com

產品線

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

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

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

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

其核心產品特點有：

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

iCRUD

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 團隊將固定、持續對全部產品線進行迭代和維護。我們也會陸續以文章、直播等形式與大家交流更多的技術細節。敬請關注！

相關文章