uniapp 安装uView-ui教程

1- 安装

npm install uview-ui

2- 下载之后复制路径中的uview-ui

3- 粘贴到项目根路径下

4- 在main.js中引入

// 引入全局uView
import uView from 'uview-ui';
Vue.use(uView);

5- 在uni.scss中引入

/**
 * 下方引入的为uView UI的集成样式文件，为scss预处理器，其中包含了一些"u-"开头的自定义变量
 * 使用的时候，请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
 * uView自定义的css类名和scss变量，均以"u-"开头，不会造成冲突，请放心使用 
 */
@import 'uview-ui/theme.scss';

6- 在App.vue中引入
注意style要加上lang=scss

<style lang="scss">
    @import "uview-ui/index.scss";
</style>

7- 在pages.json中 配置easycom组件模式

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

8- 测试

<template>
    <view class="container">
        <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    name: '待收货'
                }, {
                    name: '待付款'
                }, {
                    name: '待评价',
                    count: 5
                }],
                current: 0
        },
        methods: {
            change(index) {
                this.current = index;
            }
        }
    }
</script>

9- 重新启动项目

// 第二种，亲试有效，不知道为啥，用第一种方式引入，到微信开发者工具上面，总是报 组件找不到
使用的编辑器是Hbuilder X
1， 直接在uview官方文档内按步骤用下载的方式安装


然后是步骤，按图来
2， 先安装sass

// 安装sass
npm i sass -D

// 安装sass-loader
npm i sass-loader -D

下载好后，这边就会有uview ui的文件了。

3，这里是重点，放的位置不要放错了，官网文档上说放在import Vue之后，如果你放了是不生效的，会报错，要放在我这个位置才生效。找不到文件的报错原因也正是这边位置没放对出来的

import uView from '@/uni_modules/uview-ui';
Vue.use(uView);

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

@import "@/uni_modules/uview-ui/index.scss";

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