投稿

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

Vedu • • 资源分享 • 阅读 1763

本期推荐的是一个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.com/share/29875.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2021-10-26 07:19
下一篇 2022-07-28 15:41

相关推荐

发表评论

登录后才能评论