如何快速上手uni-app生態(tài)的uView UI框架

image

uviewUI

多平臺快速開發(fā)的UI框架

uni-app2018年初發(fā)布以來变秦，一直蓬勃發(fā)展，一派欣欣向榮席爽，社區(qū)也是人聲鼎沸意荤，眾望所歸。
因此只锻，uView應運而生玖像，uView的目標是成為uni-app生態(tài)最優(yōu)秀的UI框架。

接下來將介紹uview如何配置到uniapp項目中

如果你想了解到更詳細的文檔齐饮，進入uview官網(wǎng)查看

接下來將為你帶來幾種方式的圖文教程

使用安裝包（這里就不講解npm方式安裝了）

首先要去官網(wǎng)下載最新的包下載地址

image

官網(wǎng)提供了三種包

第一種方式只有uview源碼捐寥，這是uview的核心。
第二種方式類似于一個uview項目的腳手架祖驱，這是個空項目握恳，但它已經(jīng)幫我們配置好uview了，所以如果你是一個新的uniapp項目捺僻，可以選擇下載這個乡洼。
方式三是整個uView演示項目崇裁，里面有uView核心，組件演示束昵，模板等拔稳。此項目運行用于查看UI演示效果，復制模板案例锹雏，通過里面的示例巴比，可以快速掌握某一個組件的用法。（可以下載一個礁遵，體驗uview項目的所有組件與模版）

因為我們是教大家怎么配置一個uview轻绞，所以我們下載第一個包。

接下來我們使用HBuilderX創(chuàng)建一個uniapp的項目

image

創(chuàng)建完成之后榛丢，我們將剛剛下載的包铲球，直接復制到項目的根目錄下。

image

因為uview的使用的是scss晰赞，所以我們需要使用HBuilderX安裝scss的插件稼病。

點擊工具，插件安裝掖鱼，找到 scss/sass編譯點擊右方的安裝

image

對HBuilderX的配置就結束了然走，接下來要對項目進行設置。（分為4步）

一戏挡、引入uView主JS庫

在項目根目錄中的main.js中芍瑞，引入并使用uView的JS庫，注意這兩行要放在import Vue之后褐墅。

// main.js
import uView from "uview-ui";
Vue.use(uView);

image

二拆檬、在引入uView的全局SCSS主題文件

在項目根目錄的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

image

三妥凳、引入uView基礎樣式

在App.vue中首行的位置引入竟贯，注意給style標簽加入lang="scss"屬性

<style lang="scss">
    /* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */
    @import "uview-ui/index.scss";
</style>

image

四逝钥、配置easycom組件模式

此配置需要在項目根目錄的pages.json中進行屑那。

uni-app為了調(diào)試性能的原因，修改easycom規(guī)則不會實時生效艘款，配置完后持际，您需要重啟HX或者重新編譯項目才能正常使用uView的功能。

// pages.json
{
    "easycom": {
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    },
    
    // 此為本身已有的內(nèi)容
    "pages": [
        // ......
    ]
}

image

到此處哗咆，我們已經(jīng)將uview配置好了蜘欲，接下來寫個示例驗證一下

使用表格組件來演示一下

image

沒有任何問題，至此晌柬，我們已經(jīng)成功配置完uview啦芒填！

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者