image

uviewUI

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

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

• 接下來將介紹uview如何配置到uniapp項(xiàng)目中

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

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

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

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

image

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

• 第一種方式只有uview源碼，這是uview的核心。
• 第二種方式類似于一個(gè)uview項(xiàng)目的腳手架，這是個(gè)空項(xiàng)目，但它已經(jīng)幫我們配置好uview了，所以如果你是一個(gè)新的uniapp項(xiàng)目，可以選擇下載這個(gè)。
• 方式三是整個(gè)uView演示項(xiàng)目，里面有uView核心，組件演示，模板等。此項(xiàng)目運(yùn)行用于查看UI演示效果，復(fù)制模板案例，通過里面的示例，可以快速掌握某一個(gè)組件的用法。（可以下載一個(gè)，體驗(yàn)uview項(xiàng)目的所有組件與模版）

因?yàn)槲覀兪墙檀蠹以趺磁渲靡粋€(gè)uview，所以我們下載第一個(gè)包。

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

image

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

image

因?yàn)閡view的使用的是scss，所以我們需要使用HBuilderX安裝scss的插件。

點(diǎn)擊工具，插件安裝，找到 scss/sass編譯 點(diǎn)擊右方的安裝

image

對(duì)HBuilderX的配置就結(jié)束了，接下來要對(duì)項(xiàng)目進(jìn)行設(shè)置。（分為4步）

一、引入uView主JS庫

在項(xiàng)目根目錄中的main.js中，引入并使用uView的JS庫， 注意這兩行要放在import Vue之后。

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

image

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

在項(xiàng)目根目錄的uni.scss中引入此文件。

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

image

三、引入uView基礎(chǔ)樣式

在App.vue中首行的位置引入，注意給style標(biāo)簽加入lang="scss"屬性

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

image

四、配置easycom組件模式

此配置需要在項(xiàng)目根目錄的pages.json中進(jìn)行。

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

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

image

到此處，我們已經(jīng)將uview配置好了，接下來寫個(gè)示例驗(yàn)證一下

使用表格組件來演示一下

image

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