image

uviewUI

多平臺快速開發的UI框架

uni-app2018年初發布以來，一直蓬勃發展，一派欣欣向榮，社區也是人聲鼎沸，眾望所歸。

因此，uView應運而生，uView的目標是成為uni-app生態最優秀的UI框架。

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

如果你想了解到更詳細的文檔，進入uview官網查看

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

使用安裝包(這里就不講解npm方式安裝了)

首先要去官網下載最新的包 下載地址

image

官網提供了三種包

第一種方式只有uview源碼，這是uview的核心。

第二種方式類似于一個uview項目的腳手架，這是個空項目，但它已經幫我們配置好uview了，所以如果你是一個新的uniapp項目，可以選擇下載這個。

方式三是整個uView演示項目，里面有uView核心，組件演示，模板等。此項目運行用于查看UI演示效果，復制模板案例，通過里面的示例，可以快速掌握某一個組件的用法。(可以下載一個，體驗uview項目的所有組件與模版)

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

接下來我們使用HBuilderX創建一個uniapp的項目

image

創建完成之后，我們將剛剛下載的包，直接復制到項目的根目錄下。

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"屬性 */

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

image

四、配置easycom組件模式

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

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

// pages.json

{

"easycom": {

"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"

},

// 此為本身已有的內容

"pages": [

// ......

]

}

image

到此處，我們已經將uview配置好了，接下來寫個示例驗證一下

使用表格組件來演示一下

image

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

總結

以上是生活随笔為你收集整理的ui uview 安卓开发_uni-app UI框架之uview-ui使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。