uniapp最簡單最細心的安裝uView-ui教程

一入uni深似海，從此悠閒成泡影。不說了，說多了都是淚啊！

安裝一個uview-ui居然安裝了一上午

少年啊，千萬別用npm的方式安裝啊，真的是沒得反應啊。

第一步 根據官網去下載最新的zip文件

下載地址

第二步 下載之後複製路徑中的uview-ui

第三步 粘貼到項目根路徑下

第四步 在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>

• 記住了 重新啓動項目，成功後如下圖。

寫在最後

• 其實沒多難，可是官網上就是說不清，讓你看不懂，我真是日狗的心都有，就不能寫點兒腦子笨的人也能看得懂的文檔，害我搞了大半天。