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