[TOC] #### 1. uView 介绍 --- uView 官网: [https://www.uviewui.com](https://www.uviewui.com) ，uView 是 uni-app 生态专用的 UI 框架 下面内容摘抄自 uView 官网: 关于uView的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，同时view组件是uni-app中 最基础，最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它们表示感谢。 #### 2. uView 安装 --- **安装方式** uView 官网提供了两种安装方式: Hbuilder X 方式、NPM 方式 Hbuilder X 方式: 使用 uni-app 搭建的项目，NPM 方式: 使用 vue cli 搭建的项目，根据项目框架选择相应的方式安装即可 **使用前提** uView 依赖 SCSS，必须要安装此插件，否则无法正常运行 项目是由 `Hbuilder X` 创建的: ``` 在 “工具-插件安装” 中找到 “scss/sass编译” 插件进行安装 ``` 项目是由 `vue-cli` 创建的，通过以下命令安装对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> ```