开源精选 – uniapp生态的多平台快速开发的UI框架（uniapp开源框架吗）-云科研-畜牧所_广西畜牧所

开源精选 – uniapp生态的多平台快速开发的UI框架（uniapp开源框架吗）

投稿用户 • 2024年9月14日下午2:22 • 科研百科 • 阅读 17

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

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

开源精选 - uniapp生态的多平台快速开发的UI框架（uniapp开源框架吗）

功能特性:

兼容安卓，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开源框架吗）