iui Design基于 Uni-app 的 Vue3 UI 組件庫

iui Design 是由云磁數(shù)字「用戶體驗中心實驗室」打造一套基于 Vue3 的 Uniapp 組件庫，于 2023 年 8 月 8 日正式開源。

它提供了一套可復(fù)用、易擴展、低耦合的移動端 UI 組件庫，幫助開發(fā)者快速搭建移動應(yīng)用。

預(yù)覽

使用微信搜索小程序 iui Design 進行體驗。

移動端 H5：預(yù)覽地址

安裝

使用前，確保你已經(jīng)學習過 uni-app 的使用，可以閱讀 uni-app 文檔。

組件庫

方式一：通過 npm 安裝

npm i iui-design
# or
yarn add iui-design

方式二：通過 HBuilderX 導(dǎo)入

如果你是使用 HbuilderX 開發(fā)的用戶，可以在 uni-app 插件市場通過 uni_modules 的形式進行安裝。

下載地址

Scss 插件

iui-design 依賴 sass，你必須要安裝此插件，否則無法正常運行。

• 如果你使用的是 HbuilderX，你可以在 插件市場 中搜索 sass 進行安裝。
• 如果你的項目是由 vue-cli 創(chuàng)建的，通過以下命令安裝對 sass(scss)的支持，如果已安裝，略過。

# 安裝sass
npm i sass -D

# 安裝sass-loader
npm i sass-loader -D

配置

引入樣式

在 App.vue 中引入 iui-design 的樣式。

<style lang="scss">
// npm 模式安裝
@import "iui-design/style/index.scss";

// HBuilderX 插件市場安裝
@import "@/components/iui-design/style/index.scss";
</style>

在 uni.scss 中引入 iui-design 的主題樣式和變量。

<style lang="scss">
// npm 模式安裝
@import "iui-design/style/theme.scss";

// HBuilderX 插件市場安裝
@import "@/components/iui-design/style/theme.scss";
</style>

easycom 模式

iui-design 支持 easycom 模式，你可以在 pages.json 中配置 easycom，然后無需引入即可使用組件。

npm 模式安裝：

{
  "easycom": {
    "custom": {
      "^iui-(.*)": "iui-design/components/iui-$1/iui-$1.vue"
    }
  }
}

HBuilderX 插件市場安裝：

{
  "easycom": {
    "custom": {
      "^iui-(.*)": "@/components/iui-design/components/iui-$1/iui-$1.vue"
    }
  }
}