DataV使用

DataV官网

1.执行安装命令

npm install @jiaminghi/data-view

2.main.js全局引用

//import Vue from 'vue' //之前没有这句也要加
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

官网有{}，坑死我了

3.使用标签

以排名轮播表为例

<dv-scroll-ranking-board :config="config" style="width:500px;height:300px" />

dv-scroll-ranking-board是由官网的标注可得

<script>
  export default {
    data() {
      return {
        config: {
          data: [
            {
              name: '周口',
              value: 55
            },
            {
              name: '南阳',
              value: 120
            },
            {
              name: '西峡',
              value: 78
            },
            {
              name: '驻马店',
              value: 66
            },
            {
              name: '新乡',
              value: 80
            },
            {
              name: '信阳',
              value: 45
            },
            {
              name: '漯河',
              value: 29
            }
          ]
        }
      }
    }
  }
</script>

对于是Vue的项目，以上操作足以显示

下面是局部引入

局部引入

替换掉2.main.js全局引用

//import Vue from 'vue' //之前没有这句也要加
  import
  {scrollRankingBoard}
  from '@jiaminghi/data-view'
  Vue.use(scrollRankingBoard);

此处有无{}都可
scrollRankingBoard名称可根据下面标的目录取得：

官网示例及源码

datav官网示例
若链接失效，可通过官方入口进入，如下图所示：

datav官网示例及源码
若链接失效，可通过官方入口进入，如下图所示：

排错：Module build failed (from ./node_modules/less-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

npm install less-loader@7.3.0 --save-dev

参考

Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions