Vue 如何使用这个vue-plotly

Question

看到一个
https://github.com/statnett/v...

于是想拿来使用。因为没有使用node.js/npm那一套东西。

我使用的是传统的引用方式。

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> </script>
<script  src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="vue-plotly.min.js"></script>
<!-- 抱歉上面的vue-plotly js 我没有找到在线的js链接.可在https://github.com/statnett/vue-plotly 的dist里面下载到 --> 

<div id="app">

    <vue-plotly :data="chart_data" :layout="layout" :options="options"/>

</div>

<script>
var app = new Vue({ 
    el: '#app', 
    data: { 
         chart_data:[{ x: [1, 2, 3], y: [1, 3, 1], mode: 'lines' }],
         layout:{},
         options:{}
    } 
    })

</script>

但是这样会报vue-plotly组件没有注册。
该如何使用这个组件呢？谢谢！

Answer 1

我看了下这个文件在导出的是一个 vue 组件，你这种引入方式，这个组件是保存在 window["vue-plotly"] 变量中。

在 vue 中，如果你要使用一个组件，就需要先注册这个组件，有两种注册方式，全局注册和局部注册。

全局注册

Vue.component('component-a', window["vue-plotly"])

局部注册

局部注册就是在你的实例中用 components 字段来注册

var app = new Vue({ 
    el: '#app',
    components: {
        "vue-plotly": window["vue-plotly"]
    },
    data: { 
         chart_data:[{ x: [1, 2, 3], y: [1, 3, 1], mode: 'lines' }]
    } 
})