Appearance

本页目录

简介 ​

iui Design 是一款基于 uni-app 的前端组件库，它提供了一套可复用、易扩展、低耦合的移动端 UI 组件库，帮助开发者快速搭建移动应用。

设计灵感来自 ArcoDesign，感谢巨人！

预览 ​

请使用微信扫码查看

版本 ​

早期预览版可能存在各种问题。欢迎大家进行反馈。

npm

版权信息 ​

iui Design 遵循 Apache-2.0 开源协议，意味着您无需支付任何费用，也无需授权，即可将 iui Design 应用到您的产品中。

安装 ​

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

组件库 ​

方式一：通过 npm 安装

bash
npm i iui-design
# or
yarn add iui-design
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)的支持，如果已安装，请略过。
bash
# 安装sass
npm i sass -D

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

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

配置 ​

引入样式 ​

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

vue
<style lang="scss">
// 注意给 style 标签添加 lang="scss" 属性

// npm 模式安装
@import "iui-design/style/index.scss";

// HBuilderX 插件市场安装
@import "@/components/iui-design/style/index.scss";
</style>
<style lang="scss">
// 注意给 style 标签添加 lang="scss" 属性

// npm 模式安装
@import "iui-design/style/index.scss";

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

在 uni.scss 中引入 iui-design 的主题样式和变量。

scss
// npm 模式安装
@import "iui-design/style/theme.scss";

// HBuilderX 插件市场安装
@import "@/components/iui-design/style/theme.scss";
// npm 模式安装
@import "iui-design/style/theme.scss";

// HBuilderX 插件市场安装
@import "@/components/iui-design/style/theme.scss";

引入组件 ​

iui-design 支持 easycom 模式，您可以在 pages.json 中与 pages 同级位置添加 easycom 配置，然后无需引入即可使用组件。

json
{
  "easycom": {
    "custom": {
      // npm 模式安装
      "^iui-(.*)": "iui-design/components/iui-$1/iui-$1.vue",

      // HBuilderX 插件市场安装
      "^iui-(.*)": "@/components/iui-design/components/iui-$1/iui-$1.vue"
    }
  },

  "pages": [
    // ...
  ]
}
{
  "easycom": {
    "custom": {
      // npm 模式安装
      "^iui-(.*)": "iui-design/components/iui-$1/iui-$1.vue",

      // HBuilderX 插件市场安装
      "^iui-(.*)": "@/components/iui-design/components/iui-$1/iui-$1.vue"
    }
  },

  "pages": [
    // ...
  ]
}
json
{
  "easycom": {
    "custom": {
      "^iui-(.*)": "根据你的安装方式填写路径",
      "^i-(.*)": "根据你的安装方式填写路径"
    }
  }
}
{
  "easycom": {
    "custom": {
      "^iui-(.*)": "根据你的安装方式填写路径",
      "^i-(.*)": "根据你的安装方式填写路径"
    }
  }
}

贡献指南 ​

感谢你使用 iui Design

以下是关于向 iui Design 提交反馈或代码的指南。在向 iui Design 提交 issue 或者 PR 之前，请先花几分钟时间阅读以下内容。

提交 issue ​

  • 遇到问题时，请先确认这个问题是否已经在 issue 中有记录或者已被修复。
  • 提 issue 时，请用简短的语言描述遇到的问题，并添加出现问题时的环境和复现步骤。

参与开发 ​

我们非常乐意接受各位的优质 PR，但在此之前我希望您了解 iui Design 是一个需要兼容多个平台的组件库。 所以希望在您修复 bug 并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！

Github ​

如果你喜欢 iui Design，欢迎给我们点一个 ⭐ Star

贡献 ​