# uView > uni-app配套的UI框架 官网: https://uviewui.com/ ## 快速体验: 1. 安装 `uview` 依赖 ```js npm install uview-ui ``` 2. 引入uView主JS库 `main.js` ```js import uView from "uview-ui"; Vue.use(uView); ``` 3. 引入 全局 scss 主题样式文件 `uni.scss` ```js @import 'uview-ui/theme.scss'; ``` 4. 引入 uview的基础样式 `App.vue` ```vue ``` 5. 配置uview组件的引入方式 `pages.json` ```js { "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }, // 此为本身已有的内容 "pages": [ // ...... ] } ``` 6. `index.vue` 中使用 uview的按钮 ```vue 默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 ``` 1. 可能会出现以下错误 ![image-20210220152052575](https://img.081024.xyz/20210220161637.png) 2. 解决方法 1. 勾选 小程序的 增强编译 2. 是使用uniapp的话 不能直接修改 编译后的文件 `project.config.json` 3. 修改uniapp项目中的 `manifest.json` ```json "mp-weixin": { /* 微信小程序特有相关 */ "appid": "wxfb52f2d7b2f6123a", "setting": { "urlCheck": false, "enhance": false /* 增强编译 */ }, "usingComponents": true }, ```