iui Design基于 Uni-app 的 Vue3 UI 组件库-技术圈

iui Design基于 Uni-app 的 Vue3 UI 组件库

联合创作 · 2023-09-19

iui Design 是由云磁数字「用户体验中心实验室」打造一套基于 Vue3 的 Uniapp 组件库，于 2023 年 8 月 8 日正式开源。

它提供了一套可复用、易扩展、低耦合的移动端 UI 组件库，帮助开发者快速搭建移动应用。

预览

使用微信搜索小程序 iui Design 进行体验。

移动端 H5：预览地址

安装

使用前，确保你已经学习过 uni-app 的使用，可以阅读 uni-app 文档。

组件库

方式一：通过 npm 安装

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

方式二：通过 HBuilderX 导入

如果你是使用 HbuilderX 开发的用户，可以在 uni-app 插件市场通过 uni_modules 的形式进行安装。

下载地址

Scss 插件

iui-design 依赖 sass，你必须要安装此插件，否则无法正常运行。

如果你使用的是 HbuilderX，你可以在 插件市场 中搜索 sass 进行安装。
如果你的项目是由 vue-cli 创建的，通过以下命令安装对 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"
    }
  }
}

编辑