uniapp如何配置使用uView

下载

命令：
npm install uview-ui@2.0.31 || yarn add uview-ui@2.0.31
!注意项目名不能有中文

引入

1.在main.js引入

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

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

2.引入uView全局SCSS主题文件 uni.scss

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

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

3.引入uView主样式

在App.vue中引入样式，注意给style标签加入lang="scss"属性

// App.vue
@import "uview-ui/index.scss";

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

4.配置自动引入组件模式 pages.json

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

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

5.使用

// index.vue
<u-search placeholder="日照香炉生紫烟"></u-search>

// index.vue
<u-search placeholder="日照香炉生紫烟"></u-search>

6.运行在微信小程序看效果