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