# 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
   <style lang="scss">
       /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
       @import "uview-ui/index.scss";
   </style>
   ```

5. 配置uview组件的引入方式

   `pages.json`

   ```js
   {
       "easycom": {
           "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
       },
   
       // 此为本身已有的内容
       "pages": [
           // ......
       ]
   }
   ```

6. `index.vue` 中使用 uview的按钮

   ```vue
     <view class="content">
       <u-button>默认按钮</u-button>
       <u-button type="primary">主要按钮</u-button>
       <u-button type="success">成功按钮</u-button>
       <u-button type="info">信息按钮</u-button>
       <u-button type="warning">警告按钮</u-button>
       <u-button type="error">危险按钮</u-button>
     </view>
   ```

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
          },
      ```