vue中使用cube-ui的Index-List

需求中有个页面是带导航的List列表,想来这么常见的需求定会有轮子可用,找了一通发现滴滴的开源库cube-ui实现了此功能,但在集成使用的过程中也遇到了一些问题,在此记录。

错误信息:

These relative modules were not found:

  • ./cubeic.ttf in ./node_modules/css-loader??ref–11-oneOf-3-1!./node_modules/postcss-loader/src??ref–11-oneOf-3-2!./node_modules/stylus-loader??ref–11-oneOf-3-3!./node_modules/cube-ui/src/common/stylus/index.styl
  • ./cubeic.woff in ./node_modules/css-loader??ref–11-oneOf-3-1!./node_modules/postcss-loader/src??ref–11-oneOf-3-2!./node_modules/stylus-loader??ref–11-oneOf-3-3!./node_modules/cube-ui/src/common/stylus/index.styl

出现这个错误是因为在安装cube-ui时,没有根据vue版本而采用不同的方式。官方文档说的很明白,如果vue-cli的版本 >= 3, 直接执行vue add cube-ui即可;如果 < 3,则执行npm install cube-ui --save安装,还要修改一系列的配置。注意:vue-cli的版本不同,创建项目的方式也不同,vue2创建项目vue init webpack ***,vue3创建项目vue create ***,如果用的是vue3的版本,但创建项目时执行的指令用的vue2的,也就相当于创建了一个vue2版本的项目,也会出现上述错误。

步骤:

创建项目:vue create vue3pro;

安装脚手架:vue add cube-ui , 根据提示选择安装配置项;

按需引入:在main.js中添加

import {
    Style,
    IndexList,
} from 'cube-ui'
Vue.use(IndexList);

页面示例代码:

<template>
    <div>
        <div :style="{height: windowHeight}">
            <cube-index-list :data="cityData1">
                <cube-index-list-group
                        v-for="(group, index) in cityData1"
                        :key="index"
                        :group="group">
                    <cube-index-list-item
                            v-for="(item, index) in group.items"
                            :key="index"
                            :item="item"
                            @select="selectItem"
                            @title-click="clickTitle">
                        <div class="custom-item"><img style="width: 36px; height: 36px; vertical-align: middle; margin-right: 10px"
                                                      src="http://e.hiphotos.baidu.com/image/pic/item/d788d43f8794a4c2f12be52b00f41bd5ad6e39a1.jpg"/>{{item.name}}
                        </div>
                    </cube-index-list-item>
                </cube-index-list-group>
            </cube-index-list>
        </div>

    </div>
</template>
<script>
    const cityData = [
        {
            "name": "★Hot City",
            "items": [
                {
                    "name": "BEIJING",
                    "value": 1
                },
                {
                    "name": "SHANGHAI",
                    "value": 2
                }
            ]
        },
        {
            "name": "A",
            "items": [
                {
                    "name": "ANSHAN",
                    "value": 3
                },
                {
                    "name": "ANQING",
                    "value": 4
                }
            ]
        },
        {
            "name": "B",
            "items": [
                {
                    "name": "BEIJING",
                    "value": 5
                },
                {
                    "name": "BEIFANG",
                    "value": 6
                }
            ]
        },
        {
            "name": "D",
            "items": [
                {
                    "name": "D111",
                    "value": 7
                },
                {
                    "name": "D222",
                    "value": 8
                }
            ]
        },
        {
            "name": "H",
            "items": [
                {
                    "name": "H111",
                    "value": 9
                },
                {
                    "name": "H222",
                    "value": 10
                }
            ]
        },
        {
            "name": "K",
            "items": [
                {
                    "name": "KKKK",
                    "value": 11
                },
                {
                    "name": "Kjjjj",
                    "value": 12
                }
            ]
        },
        {
            "name": "E",
            "items": [
                {
                    "name": "E23232",
                    "value": 13
                },
                {
                    "name": "Eeerrrrr",
                    "value": 14
                }
            ]
        }
    ];
    export default {
        data() {
            return {
                title: 'Current City: BEIJING',
                cityData1: cityData,
                windowHeight: window.innerHeight + "px"
            }
        },
        methods: {
            selectItem(item) {
                console.log(item.name)
            },
            clickTitle(title) {
                console.log(title)
            }
        },
        mounted() {
            // this.windowHeight = document.documentElement.clientHeight + "px"
            // this.windowHeight = window.innerHeight + "px"
        },
    }
</script>

<style>
    .custom-item {
        position: relative;
        height: 70px;
        line-height: 70px;
        padding: 0 16px;
    }
    .cube-index-list-content {
        background-color: rgb(255, 255, 255);
        color: #4b4b4b;
        font-size: 1rem;
    }
    .cube-index-list-anchor {
        background-color: #eeeeee;
        height: 30px;
        line-height: 30px;
        padding: 0 0 0 20px;
    }
    .cube-index-list-nav {
        padding: 20px 0;
        border-radius: 10px;
        background: rgba(167, 167, 167, 1);
    }
    .cube-index-list-nav>ul>li.active {
        color: rgba(53, 22, 255, 0.99);
    }

</style>

运行:npm run serve

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值