uviewUI

多平臺快速開發的UI框架

---

uni-app2018年初發布以來，一直蓬勃發展，一派欣欣向榮，社區也是人聲鼎沸，眾望所歸。
因此，uView應運而生，uView的目標是成為uni-app生態最優秀的UI框架。

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

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

---

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

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

npm安裝教程請閱讀本篇教程的姊妹篇《uni-app uView UI框架 npm安裝教程》。

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





點擊之后進入插件市場，選擇右邊下載插件ZIP





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

創建完成之后，我們將剛剛下載的包解壓，內部有一個uView-ui的文件夾，直接復制到項目的根目錄下。

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

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

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

一、引入uView主JS庫

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

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

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

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

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

三、引入uView基礎樣式

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

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

四、配置easycom組件模式

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

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

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

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

使用表格組件來演示一下

沒有任何問題，至此，我們已經成功配置完uview啦！如果覺得我們uView框架還不錯的話，麻煩在插件市場給個5星好評哦。

總結

以上是生活随笔為你收集整理的uni-app uView UI框架 下载安装教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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