[TOC] #### 1. uView 介绍 --- uView 官网: <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 方式，根据项目框架选择相应的方式安装即可 + npm 方式: 项目是用 npm 管理的 + hbuilder X 方式: 使用 uni-app 搭建的项目 ##### 安装依赖 uView 依赖 scss，必须要安装此插件或依赖包使其支持 scss 语法，否则无法正常运行 + 场景 1：项目是由 `Hbuilder X` 创建的: 在 “工具-插件安装” 中找到 “scss/sass编译” 插件进行安装 + 场景 2：项目是用 npm 管理的，通过以下命令安装对 sass（scss）的支持: ```bash # 安装sass npm i sass -D # 安装sass-loader npm i sass-loader -D ``` #### 3. uni-app 安装 uView --- 使用 HBuilderX 导入插件：<https://ext.dcloud.net.cn/plugin?id=1593> **配置步骤** 1\. 引入 uView 主 JS 库：在项目根目录下的 `main.js`，导入并使用 uView 的 JS 库 ```javascript 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` 标签的首行添加以下内容 ```scss /* 注意要写在第一行，同时给 style 标签加入 lang="scss" 属性 */ @import "@/uni_modules/uview-ui/index.scss"; ```