刚开始 Vue.js 和 webpack。我正在尝试将 vue-chartjs 功能添加到我的项目中。我收到以下错误:
Uncaught TypeError: _vueChartjs.Line.extend is not a function
at Object.defineProperty.value (..\..\CommodityChart.vue:5)
at __webpack_require__ (bootstrap 7040a42393b737f78245:659)
at fn (bootstrap 7040a42393b737f78245:85)
at Object.<anonymous> (CommodityChart.vue:3)
at __webpack_require__ (bootstrap 7040a42393b737f78245:659)
at fn (bootstrap 7040a42393b737f78245:85)
at Object.defineProperty.value (..\..\fetch-data.vue:36)
at __webpack_require__ (bootstrap 7040a42393b737f78245:659)
at fn (bootstrap 7040a42393b737f78245:85)
at Object.<anonymous> (fetch-data.vue:7)
在我的 package.json
"dependencies": {
"axios": "^0.15.3",
"bootstrap-vue": "^1.0.0-beta.9",
"chart.js": "^2.7.1",
"core-js": "^2.4.1",
"font-awesome": "^4.6.3",
"vue": "^2.1.8",
"vue-chartjs": "^3.0.0",
"vue-router": "^2.1.1",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.1.8",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1"
},
我可以在我的 node_modules 文件夹(chart.js 和 vue-chartjs)中看到依赖项。
我抛出错误的 .vue 文件如下所示:
<script>
//Importing Line class from the vue-chartjs wrapper
import { Line } from 'vue-chartjs'
//Exporting this so it can be used in other components
export default Line.extend({
data () {
return {
datacollection: {
//Data to be represented on x-axis
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
pointBackgroundColor: 'white',
borderWidth: 1,
pointBorderColor: '#249EBF',
//Data to be represented on y-axis
data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100]
}
]
},
//Chart.js options that controls the appearance of the chart
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [ {
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
//renderChart function renders the chart with the datacollection and options object.
this.renderChart(this.datacollection, this.options)
}
})
</script>
我是否需要在我的条目 js 文件中的其他地方导入/引用图表库?Webpack 参考资料?没有 chart.vue 文件,项目运行良好。