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

安裝一個(gè)uview-ui居然安裝了一上午

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

第一步 根據(jù)官網(wǎng)去下載最新的zip文件

下載地址

第二步 下載之后復(fù)制路徑中的uview-ui

image.png

第三步 粘貼到項(xiàng)目根路徑下

image.png

第四步 在main.js中引入

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

第五步 在uni.scss中引入

/**
 * 下方引入的為uView UI的集成樣式文件，為scss預(yù)處理器，其中包含了一些"u-"開頭的自定義變量
 * 使用的時(shí)候，請(qǐng)將下面的一行復(fù)制到您的uniapp項(xiàng)目根目錄的uni.scss中即可
 * uView自定義的css類名和scss變量，均以"u-"開頭，不會(huì)造成沖突，請(qǐng)放心使用 
 */
@import 'uview-ui/theme.scss';

第六步 在App.vue中引入

• 注意style要加上lang=scss

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

第七步 測(cè)試

• 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: '待評(píng)價(jià)',
                    count: 5
                }],
                current: 0
        },
        methods: {
            change(index) {
                this.current = index;
            }
        }
    }
</script>

• 記住了 重新啟動(dòng)項(xiàng)目，成功后如下圖。

image.png

寫在最后

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