uniapp最简单最细心的安装uView-ui教程

一入uni深似海，从此悠闲成泡影。不说了，说多了都是泪啊！

安装一个uview-ui居然安装了一上午

少年啊，千万别用npm的方式安装啊，真的是没得反应啊。

第一步 根据官网去下载最新的zip文件

下载地址

第二步 下载之后复制路径中的uview-ui

image.png

第三步 粘贴到项目根路径下

image.png

第四步 在main.js中引入

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

第五步 在uni.scss中引入

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

第六步 在App.vue中引入

• 注意style要加上lang=scss

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

第七步 测试

• index.vue

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

• 记住了 重新启动项目，成功后如下图。

image.png

写在最后

• 其实没多难，可是官网上就是说不清，让你看不懂，我真是日狗的心都有，就不能写点儿脑子笨的人也能看得懂的文档，害我搞了大半天。