uView

uni-app配套的UI框架

官网: https://uviewui.com/

快速体验:

1. 安装 uview 依赖

   npm install uview-ui

2. 引入uView主JS库

   main.js

   import uView from "uview-ui";
   Vue.use(uView);

3. 引入 全局 scss 主题样式文件

   uni.scss

   @import 'uview-ui/theme.scss';

4. 引入 uview的基础样式

   App.vue

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

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

   pages.json

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

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

     <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>

7. 可能会出现以下错误

   

8. 解决方法

   1. 勾选 小程序的 增强编译

   2. 是使用uniapp的话 不能直接修改 编译后的文件 project.config.json

   3. 修改uniapp项目中的 manifest.json

          "mp-weixin": { /* 微信小程序特有相关 */
              "appid": "wxfb52f2d7b2f6123a",
              "setting": {
                  "urlCheck": false,
                  "enhance": false /* 增强编译 */
              },
              "usingComponents": true
          },