Code Monkey home page Code Monkey logo

hello-iui's Introduction

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 协议,请自由地享受和参与开源

hello-iui's People

Contributors

joeshutt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.