Skip to content

⚙️ iui uniapp组件库演示示例【停止维护】

License

Notifications You must be signed in to change notification settings

JoeshuTT/hello-iui

Repository files navigation

iui - 一个基于 uni-app 的高质量 UI 组件库(兼容 NVUE)

介绍

iui 是一款基于 uni-app,面向移动端,兼顾 NVUE 的 UI 组件库,适用于跨端开发。

iui 是怎么来的?

来自一枚强迫症患者 Front-end Coder 的产物

由个人开发者维护,对 Vant 组件库的致敬之作

特性

  • 极简、轻便、灵活
  • 高质量代码,源码易读,可扩,可学
  • 上手简单,Vant 组件接口
  • 优雅美观,Vant 设计体系

支持平台

app H5 微信小程序

提示:其他平台的适配测试工作暂无打算。

如何设计一个前端通用组件

组件的形态(DOM 结构)永远是千变万化的,但是其行为(逻辑)是固定的,因此通用组件的秘诀之一 就是将 DOM 结构的控制权交给开发者,组件只负责行为和最基本的 DOM 结构。

将这句话放在末尾,也是为了着重强调,iui 是遵循该原则去设计的。

👀 预览

Hello Iui 演示示例发布页面,点击跳转

记得帮我点个 start !important,鼓励鼓励我这个切图仔

使用文档在此,传送门

🚀 快速上手

  1. 下载组件库

仅仅只需要将示例工程下的 @/components/iui/,拷贝到你的项目@/components/下,对你的项目没有任何侵入性。 如果项目有用到 easycom 模式(会按需打包,自动剔除没有使用的组件),可以跳过引入,注册步骤,直接在页面中使用就好啦。

// 代码演示
<template>
  <view class="container">
    <i-button type="default" text="默认按钮" />
  </view>
</template>

<script>
// 引入
import IButton from '@/components/i-ui/i-button/i-button.vue'

export default {
  // 注册
  components: {
    IButton,
  },
  // 其他代码...
}
</script>
  1. 关于 SCSS

iui 有依赖 scss,请务必安装相关依赖项

  1. 配置 easycom 组件模式(无需引用、注册,即可直接在页面中使用)

在项目根目录下的 pages.json 中进行配置,完成后重启 HX 或者重新编译项目,即可正常使用。

// pages.json
"easycom": {
    "autoscan": true,
    "custom": {
        "^uni-(.*)": "@/components/uni-ui/uni-$1/uni-$1.vue",
        "^i-(.*)": "@/components/i-ui/i-$1/i-$1.vue"
    }
}

致谢

iui 的组件设计有参考了 uni-ui,vant-ui,weex-ui,感谢开源!

开源协议

本项目基于 MIT 协议,请自由地享受和参与开源