《開(kāi)源精選》是我們分享Github、Gitee等開(kāi)源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)uni-app生態(tài)的多平臺(tái)快速開(kāi)發(fā)的UI框架——uView UI。

uni-app在2018年初發(fā)布以來(lái)，一直蓬勃發(fā)展，一派欣欣向榮，社區(qū)也是人聲鼎沸，眾望所歸。因此，uView應(yīng)運(yùn)而生，uView的目標(biāo)是成為uni-app生態(tài)最優(yōu)秀的UI框架。

功能特性:

• 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付寶小程序，頭條小程序
• 60 精選組件，功能豐富，多端兼容，讓您快速集成，開(kāi)箱即用
• 眾多貼心的JS利器，讓您飛鏢在手，召之即來(lái)，百步穿楊
• 眾多的常用頁(yè)面和布局，讓您專注邏輯，事半功倍
• 詳盡的文檔支持，現(xiàn)代化的演示效果
• 按需引入，精簡(jiǎn)打包體積

安裝:

下載地址uView UI已發(fā)布Sketch和Axure設(shè)計(jì)資源 – DCloud 插件市場(chǎng)

快速上手:

1. main.js引入uView庫(kù)

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

2. App.vue引入基礎(chǔ)樣式(注意style標(biāo)簽需聲明scss屬性支持)

<style lang="scss">@import "uview-ui/index.scss";</style>

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

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

4. pages.json配置easycom規(guī)則(按需引入)

{"easycom": {// 下載安裝的方式需要前面的"@/"，npm安裝的方式無(wú)需"@/"// 下載安裝方式"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"// npm安裝方式// "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},// 此為本身已有的內(nèi)容"pages": [// ......]}

5. 配置easycom規(guī)則后，自動(dòng)按需引入，無(wú)需import組件，直接引用即可。

<template><u-button>按鈕</u-button></template>

組件示例:

• 顏色

• 按鈕

• Layout布局

• Form表單

• 其他

• 工具

• 模板

更多內(nèi)容大家可自行前往閱讀。

開(kāi)源地址：https://gitee.com/umicro/uView

如需項(xiàng)目推薦、獲取資源請(qǐng)私信作者