uView

uni-app配套的UI框架

官网: https://uviewui.com/

快速体验:

安装 uview 依赖
```
npm install uview-ui
```

引入uView主JS库

main.js

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

引入全局 scss 主题样式文件

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

引入 uview的基础样式

App.vue

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

配置uview组件的引入方式

pages.json

{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },

    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

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>

可能会出现以下错误

解决方法

勾选小程序的增强编译
是使用uniapp的话不能直接修改编译后的文件 project.config.json

修改uniapp项目中的 manifest.json

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

1.8 KiB Executable File Raw Blame History Unescape Escape

uView

快速体验:

1.8 KiB

Executable File

Raw Blame History