龙空技术网

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

GitHub精选 5757

前言:

现时你们对“h5 ui框架”大体比较珍视,兄弟们都想要知道一些“h5 ui框架”的相关内容。那么小编在网络上网罗了一些关于“h5 ui框架””的相关内容,希望同学们能喜欢,你们一起来学习一下吧!

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个uni-app生态的多平台快速开发的UI框架——uView UI。

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

组件示例:

颜色

按钮Layout布局Form表单其他工具模板

更多内容大家可自行前往阅读。

开源地址:

如需项目推荐、获取资源请私信作者

标签: #h5 ui框架