[TOC] #### 1. uView 介紹 --- uView 官網(wǎng): [https://www.uviewui.com](https://www.uviewui.com) ,uView 是 uni-app 生態(tài)專用的 UI 框架 下面內(nèi)容摘抄自 uView 官網(wǎng): 關于uView的取名來由,首字母u來自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸為UI、視圖之意)同音,同時view組件是uni-app中 最基礎,最重要的組件,故取名uView,表達源于uni-app和Vue之意,同時在此也對它們表示感謝。 #### 2. uView 安裝 --- **安裝方式** uView 官網(wǎng)提供了兩種安裝方式: Hbuilder X 方式、NPM 方式 Hbuilder X 方式: 使用 uni-app 搭建的項目,NPM 方式: 使用 vue cli 搭建的項目,根據(jù)項目框架選擇相應的方式安裝即可 **使用前提** uView 依賴 SCSS,必須要安裝此插件,否則無法正常運行 項目是由 `Hbuilder X` 創(chuàng)建的: ``` 在 “工具-插件安裝” 中找到 “scss/sass編譯” 插件進行安裝 ``` 項目是由 `vue-cli` 創(chuàng)建的,通過以下命令安裝對sass(scss)的支持: ``` // 安裝sass npm i sass -D // 安裝sass-loader npm i sass-loader -D ``` #### 3. uView 在 uni-app 中的使用 --- 使用 HBuilderX 導入插件 [https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593) **配置步驟** 1\. 引入 uView 主 JS 庫 在項目根目錄中的 `main.js`,引入并使用 uView 的 JS 庫,這兩行要放到 `import Vue from 'vue'` 后 ```javascript // main.js import uView from '@/uni_modules/uview-ui' Vue.use(uView) ``` 2\. 引入 uView 的全局 SCSS 主題文件 在項目根目錄中的 `uni.scss`,引入全局SCSS主題文件 ```scss /* uni.scss */ @import '@/uni_modules/uview-ui/theme.scss'; ``` 3\. 引入 uView 基礎樣式 在項目根目錄中的 `App.vue`,注意,要在首行位置引入,并且給 style 標簽添加 `lang="scss"` 屬性 ``` <style lang="scss"> /* 注意要寫在第一行,同時給style標簽加入lang="scss"屬性 */ @import "@/uni_modules/uview-ui/index.scss"; </style> ```