uView UI,是uniapp生態最優秀的UI框架
官網：https://www.uviewui.com/components/intro.html
多平台快速開發的UI框架
體驗
介紹
來由
uni-app2018年初發布以來，一直蓬勃發展，一派欣欣向榮，社區也是人聲鼎沸，眾望所歸。
因此，uView應運而生，uView的目標是成為uni-app生態最優秀的UI框架。
關於uView的取名來由，首字母u來自於uni-app首字母，uni-app是基於Vue.js，Vue和View(延伸為UI、視圖之意)同音，同時view組件uni-app中 最基礎，最重要的組件，故取名uView，表達源於uni-app和Vue之意，同時在此也對它們表示感謝。
適用領域
uView是uni-app生態專用的UI框架，uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼， 可發布到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平台(引言自uni-app網)。
說明，由於uni-app目前暫未支持編譯到PC端，所以uView目前也不適用於PC端，如uni-app兼容了PC端，uView也會第一時間跟進適配。
版權信息
uView遵循MIT開源協議，意味着您無需支付任何費用，也無需授權，即可將uView應用到您的產品中。
注意：這並不意味着您可以將uView應用到非法的領域，比如涉及賭博，暴力等方面。如因此產生糾紛等法律問題，uView不承擔任何責任。
安裝
說明
由於uView使用easycom模式，讓您無需引入組件即可直接使用，但是此功能需要Hbuilder X 2.5.5及以上版本才支持，詳見配置easycom組件模式。 easycom打包的時候是按需引入的，您可以放心引入uView的整個組件庫，打包的會自動剔除您沒有使用的組件。
下載安裝
使用下載的方式安裝，能更方便閱讀源碼，但是每次升級都需要重新下載並覆蓋uview-ui文件夾。
- 如果您的項目是由HBuilder X創建的標准uni-app項目，解壓后將
uview-ui文件夾，復制到項目根目錄。 - 如果您的項目是由vue-cli模式創建的， 請將下載解壓的
uview-ui文件夾放到項目的src文件夾中即可。
注意： 此安裝方式必須要按照下載方式安裝的配置中的說明配置了才可用。
下載地址(1.4.0)：https://ext.dcloud.net.cn/plugin?id=1593
示例項目
此方式為整個uView演示項目，里面有uView核心，組件演示，模板等，建議用戶可以下載 此項目運行用於查看UI演示效果，復制模板案例，通過里面的示例，可以快速掌握某一個組件的用法。
下載地址(1.4.0)：https://ext.dcloud.net.cn/plugin?id=1593
注意
演示項目不適用於直接開發中，它只是演示用的，可以直接運行並查看效果。
如果在微信開發工具真機預覽時，提示分包太大運行的問題，請在HBuilder X進行設置：菜單欄 運行 -> 運行到小程序模擬器，在下拉菜單中勾選"運行時是否壓縮代碼"
空白項目
此方式為一個完整的uni-app示例工程(使用Hbuilder X創建，非vue-cli模式創建)， 它適用於新啟動的項目，其中已包含了uView，並且做好了所有配置，讓您無需任何配置，開箱即用。
使用方法： 下載演示項目，解壓根目錄的壓縮包，即可得到空白項目。
下載地址(1.4.0)：https://ext.dcloud.net.cn/plugin?id=1593
npm安裝
使用npm的方式安裝，能更方便進行升級。
- 如果您的項目是通過vue-cli模式創建的， 無需手動npm安裝
scss，因為已內置scss。
注意： 此安裝方式必須要按照npm方式安裝的配置中的說明配置了才可用，且項目名稱不能有中文字符。
注意！
由於HX編譯錯誤的原因的，目前(2020-05-06)不支持通過cnpm安裝uView，這意味着您只能通過npm安裝uView，如果您的網絡無法使用npm， 那就使用下載的方式安裝，等HX修復此問題，可以使用cnpm的時候，我們會撤銷此通告。
// 如果您的項目是HX創建的，根目錄又沒有package.json文件的話，請先執行如下命令：
// npm init -y
// 安裝
npm install uview-ui
// 更新
npm update uview-ui
版本查詢
有兩種方式可以查詢到正在使用的uView的版本：
- 通過
console.log打印的形式
console.log(this.$u.config.v);
// 或者(二者等價)
console.log(this.$u.config.version);
- 通過源碼查看的形式
可以查閱uView的配置文件得知當前版本號，具體位置為"/uview-ui/libs/config/config.js"。
一 npm配置
關於SCSS
uView依賴SCSS，您必須要安裝此插件，否則無法正常運行。
- 如果您的項目是由
HBuilder X創建的，相信已經安裝scss插件，如果沒有，請在HX菜單的 工具->插件安裝中找到"scss/sass編譯"插件進行安裝， 如不生效，重啟HX即可 - 如果您的項目是由vue-cli創建的，請通過以下命令安裝對sass(scss)的支持，如果已安裝，請略過。
// 安裝node-sass
npm i node-sass -D
// 安裝sass-loader
npm i sass-loader -D
准備工作
在進行配置之前，請確保您已經根據安裝中的步驟對uView進行了npm安裝，如果沒有，請先執行安裝：
// 如果您的項目是HX創建的，根目錄又沒有package.json文件的話，請先執行如下命令：
// npm init -y
// 安裝
npm install uview-ui
配置步驟
1. 引入uView主JS庫
在項目根目錄中的main.js中，引入並使用uView的JS庫，注意這兩行要放在import Vue之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
2. 在引入uView的全局SCSS主題文件
在項目根目錄的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
3. 引入uView基礎樣式
注意！
在App.vue中首行的位置引入，注意給style標簽加入lang="scss"屬性
<style lang="scss">
/* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */
@import "uview-ui/index.scss";
</style>
4. 配置easycom組件模式
此配置需要在項目根目錄的pages.json中進行。
溫馨提示
uni-app為了調試性能的原因，修改easycom規則不會實時生效，配置完后，您需要重啟HX或者重新編譯項目才能正常使用uView的功能。
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此為本身已有的內容
"pages": [
// ......
]
}
二 下載安裝方式配置
關於SCSS
uView依賴SCSS，您必須要安裝此插件，否則無法正常運行。
- 如果您的項目是由
HBuilder X創建的，相信已經安裝scss插件，如果沒有，請在HX菜單的 工具->插件安裝中找到"scss/sass編譯"插件進行安裝， 如不生效，重啟HX即可 - 如果您的項目是由
vue-cli創建的，請通過以下命令安裝對sass(scss)的支持，如果已安裝，請略過。
// 安裝node-sass
npm i node-sass -D
// 安裝sass-loader
npm i sass-loader -D
准備工作
在進行配置之前，請確保您已經根據安裝中的步驟對uView進行了下載安裝，如果沒有，請先下載安裝。
配置步驟
1. 引入uView主JS庫
在項目根目錄中的main.js中，引入並使用uView的JS庫，注意這兩行要放在import Vue之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
2. 在引入uView的全局SCSS主題文件
在項目根目錄的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
3. 引入uView基礎樣式
注意！
在App.vue中首行的位置引入，注意給style標簽加入lang="scss"屬性
<style lang="scss">
/* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */
@import "uview-ui/index.scss";
</style>
4. 配置easycom組件模式
此配置需要在項目根目錄的pages.json中進行。
溫馨提示
uni-app為了調試性能的原因，修改easycom規則不會實時生效，配置完后，您需要重啟HX或者重新編譯項目才能正常使用uView的功能。
// pages.json
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此為本身已有的內容
"pages": [
// ......
]
}