第一步

• 創(chuàng)建好uniapp項(xiàng)目,如果根目錄沒有package.json,使用：

    npm init -y

第二步 下載Uview ui組件庫

    <!-- 下載 -->
    npm install uview-ui@2.0.31
    
    <!-- 更新 -->
    npm update uview-ui

第三步

如果是 HBuilder X 創(chuàng)建項(xiàng)目 是內(nèi)置sass的，所以不用下載 ，這一步跳過

• vue-cli 創(chuàng)建項(xiàng)目則使用 ：

    // 安裝sass
    npm i sass -D
    
    // 安裝sass-loader，注意需要版本10，否則可能會(huì)導(dǎo)致vue與sass的兼容問題而報(bào)錯(cuò)
    npm i sass-loader@10 -D

第四步

• 在項(xiàng)目根目錄中的main.js中，引入并使用uView的JS庫，注意這兩行要放在 import Vue 之后。

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

第五步

• 在項(xiàng)目根目錄的uni.scss中引入此文件。

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

第六步 引入uView基礎(chǔ)樣式

• 在App.vue中的 style標(biāo)簽 首行的位置引入，注意給style標(biāo)簽加入lang="scss"屬性

    <style lang="scss">
        /* 注意要寫在第一行，同時(shí)給style標(biāo)簽加入lang="scss"屬性 */
        @import "uview-ui/index.scss";
    </style>

第七步 配置easycom組件模式

• 此配置需要在項(xiàng)目根目錄的pages.json中進(jìn)行

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

第八步 從新打開 HBuilder X 使用以下代碼測(cè)試是否成功

<template>
    <u-swiper
            :list="list3"
            indicator
            indicatorMode="line"
            circular
    ></u-swiper>
</template>
<script>
    export default {
        data() {
            return {
                list3: [
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                ],
            }
        }
    }
</script>