HBuilder X 引入Uview ui组件库

第一步

• 创建好uniapp项目,如果根目录没有package.json,使用：

    npm init -y

第二步 下载Uview ui组件库

  # 这个里的下载命令的版本 可以去官网查看 ：https://uviewui.com/components/install.html
    <!-- 下载 -->
    npm install uview-ui@2.0.38
    
    <!-- 更新 -->
    npm update uview-ui

第三步

如果是 HBuilder X 创建项目 是内置sass的，所以不用下载 ，这一步跳过

• vue-cli 创建项目则使用 ：

    // 安装sass
    npm i sass -D
    
    // 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
    npm i sass-loader@10 -D

第四步

• 在项目 根目录 中的 main.js中，引入并使用uView的JS库，注意这两行要放在 import Vue 之后。

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

第五步

• 在项目 根目录 的 uni.scss 中引入此文件。

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

第六步 引入uView基础样式

• 在App.vue中的 style标签 首行的位置引入，注意给style标签加入lang=”scss”属性

    <style lang="scss">
        /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
        @import "uview-ui/index.scss";
    </style>

第七步 配置easycom组件模式

• 此配置需要在项目 根目录 的pages.json中进行

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

第八步 从新打开 HBuilder X 使用以下代码测试是否成功

• 这是Uview ui 组件库中轮播图的代码

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