![]()
image
image
uviewUI
多平臺快速開發(fā)的UI框架
uni-app2018年初發(fā)布以來论巍，一直蓬勃發(fā)展烛谊，一派欣欣向榮，社區(qū)也是人聲鼎沸嘉汰，眾望所歸丹禀。
因此，uView應運而生鞋怀，uView的目標是成為uni-app生態(tài)最優(yōu)秀的UI框架双泪。
- 接下來將介紹uview如何配置到uniapp項目中
如果你想了解到更詳細的文檔，進入uview官網查看
接下來將為你帶來幾種方式的圖文教程
使用安裝包（這里就不講解npm方式安裝了）
首先要去官網下載最新的包 下載地址
image
官網提供了三種包
- 第一種方式只有uview源碼密似，這是uview的核心焙矛。
- 第二種方式類似于一個uview項目的腳手架，這是個空項目残腌，但它已經幫我們配置好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為了調試性能的原因，修改easycom規(guī)則不會實時生效焰络，配置完后戴甩，您需要重啟HX或者重新編譯項目才能正常使用uView的功能。
// pages.json
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此為本身已有的內容
"pages": [
// ......
]
}
image
到此處闪彼，我們已經將uview配置好了甜孤，接下來寫個示例驗證一下
使用表格組件來演示一下
image
沒有任何問題，至此畏腕，我們已經成功配置完uview啦缴川！
