uView UI:uniapp生态的多平台快速开发的UI框架

本期推荐的是一个uni-app生态的多平台快速开发的UI框架——uView UI

uni-app在2018年初发布以来,一直蓬勃发展,一派欣欣向荣,社区也是人声鼎沸,众望所归。因此,uView应运而生,uView的目标是成为uni-app生态最优秀的UI框架。

开源精选 | uniapp生态的多平台快速开发的UI框架

功能特性:

  • 兼容安卓,iOS,微信小程序,H5,QQ小程序,百度小程序,支付宝小程序,头条小程序
  • 60+精选组件,功能丰富,多端兼容,让您快速集成,开箱即用
  • 众多贴心的JS利器,让您飞镖在手,召之即来,百步穿杨
  • 众多的常用页面和布局,让您专注逻辑,事半功倍
  • 详尽的文档支持,现代化的演示效果
  • 按需引入,精简打包体积

安装:

下载地址uView UI已发布Sketch和Axure设计资源 – DCloud 插件市场

快速上手:

1. main.js引入uView库

import uView from 'uview-ui';
Vue.use(uView);

2. App.vue引入基础样式(注意style标签需声明scss属性支持)

<style lang="scss">

@import "uview-ui/index.scss";

</style>

3. uni.scss引入全局scss变量文件

@import "uview-ui/theme.scss";

4. pages.json配置easycom规则(按需引入)

{

"easycom": {

// 下载安装的方式需要前面的"@/",npm安装的方式无需"@/"

// 下载安装方式

"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"

// npm安装方式

// "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"

},

// 此为本身已有的内容

"pages": [

// ......

]

}

5. 配置easycom规则后,自动按需引入,无需import组件,直接引用即可。

<template>

<u-button>按钮</u-button>

</template>
开源精选 | uniapp生态的多平台快速开发的UI框架

组件示例:

  • 颜色
开源精选 | uniapp生态的多平台快速开发的UI框架

  • 按钮
开源精选 | uniapp生态的多平台快速开发的UI框架

  • Layout布局
开源精选 | uniapp生态的多平台快速开发的UI框架

  • Form表单
开源精选 | uniapp生态的多平台快速开发的UI框架

  • 其他
开源精选 | uniapp生态的多平台快速开发的UI框架

  • 工具
开源精选 | uniapp生态的多平台快速开发的UI框架

  • 模板
开源精选 | uniapp生态的多平台快速开发的UI框架

开源精选 | uniapp生态的多平台快速开发的UI框架

开源地址:https://gitee.com/umicro/uView

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.net/share/29875.html

发表评论

登录后才能评论