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