为什么 nuxt 使用 vue-chartjs 给我这个错误? [英] Why does nuxt give me this error with vue-chartjs?
问题描述
我在尝试使 vue-chartjs 工作时遇到此错误
./node_modules/vue-chartjs/es/BaseCharts.js 中的警告"在 'chart.js' 中找不到导出 'default'(导入为 'Chart')还有这个在开发工具中:
TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default 不是构造函数重新创建的步骤:
- 使用以下命令创建 nuxt 应用程序:
$ yarn create nuxt-app - 添加 vue-chartjs 和
$ yarn add vue-chartjs chart.js - 添加以下应根据 vue-chartjs 文档工作的代码
~/components/BarChart.js
import { Bar } from 'vue-chartjs'导出默认{延伸:酒吧，道具:['数据'，'选项']，安装(){this.renderChart(this.data, this.options)},}~/pages/index.vue
<div class="container"><div><条形图:data="barChartData";:options="barChartOptions";:height=200"/></模板><脚本>导出默认{数据() {返回 {条形图数据:{标签: ['2019-06','2019-07','2019-08','2019-09','2019-10','2019-11','2019-12','2020-01','2020-02','2020-03','2020-04','2020-05',],数据集:[{label: '访问',数据:[10, 15, 20, 30, 40, 50, 60, 70, 34, 45, 11, 78, 45],背景颜色:'#003f5c'，},{标签:'页面浏览量'，数据:[30, 24, 57, 23, 68, 72, 25, 64, 133, 143, 165, 33, 56],背景颜色:'#2f4b7c'，},{标签:'用户'，数据:[45, 65, 30, 53, 34, 35, 26, 37, 34, 45, 67, 87, 98],背景颜色:'#665191'，},],},条形图选项:{响应:真实，传奇: {显示:假，},标题: {显示:真实，text: '谷歌分析数据',字体大小:24，fontColor: '#6b7280',},工具提示:{背景颜色:'#17BF62'，},尺度:{x轴:[{网格线: {显示:假，},},],y轴:[{刻度:{beginAtZero: 真,},网格线: {显示:假，},},],},},}},}<风格>/* 使用 Tailwind CSS 示例 `apply` 规则.容器 {@apply min-h-screen flex justify-center items-center text-center mx-auto;}*/.容器 {边距:0 自动；最小高度:100vh；显示:弹性；对齐内容:居中；对齐项目:居中；文本对齐:居中；}.标题 {font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,Segoe UI"、Roboto、Helvetica Neue"、Arial、无衬线；显示:块；字体粗细:300；字体大小:100px；颜色:#35495e；字母间距:1px；}.subtitle {字体粗细:300；字体大小:42px；颜色:#526488；字间距:5px；填充底部:15px；}.links {填充顶部:15px；}</风格>
我也在项目中使用了 tailwindcss，其他 nuxt 项目选项包括 Axios、Git、ESlint、Prettier.
Chart.js 有一个带有 3.0.x 的新版本.我认为，vue-chartjs 尚不支持.
您可以降级 chart.js 并重试.
ChartJS [3.0.1 - 2 天前发布]https://www.npmjs.com/package/chart.js?activeTab=readme
大约 22 小时前有一个 vue-chartjs 问题.https://github.com/apertureless/vue-chartjs/issues/695
I get this error while trying to make vue-chartjs work
WARN in ./node_modules/vue-chartjs/es/BaseCharts.js
"export 'default' (imported as 'Chart') was not found in 'chart.js'
And also this in devtools:
TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
Steps to recreate:
- Create nuxt app with:
$ yarn create nuxt-app <project_name> - Add vue-chartjs with
$ yarn add vue-chartjs chart.js - Add following code which should work according to vue-chartjs docs
~/components/BarChart.js
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
props: ['data', 'options'],
mounted() {
this.renderChart(this.data, this.options)
},
}
~/pages/index.vue
<template>
<div class="container">
<div>
<bar-chart
:data="barChartData"
:options="barChartOptions"
:height="200"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
barChartData: {
labels: [
'2019-06',
'2019-07',
'2019-08',
'2019-09',
'2019-10',
'2019-11',
'2019-12',
'2020-01',
'2020-02',
'2020-03',
'2020-04',
'2020-05',
],
datasets: [
{
label: 'Visits',
data: [10, 15, 20, 30, 40, 50, 60, 70, 34, 45, 11, 78, 45],
backgroundColor: '#003f5c',
},
{
label: 'Pages Views',
data: [30, 24, 57, 23, 68, 72, 25, 64, 133, 143, 165, 33, 56],
backgroundColor: '#2f4b7c',
},
{
label: 'Users',
data: [45, 65, 30, 53, 34, 35, 26, 37, 34, 45, 67, 87, 98],
backgroundColor: '#665191',
},
],
},
barChartOptions: {
responsive: true,
legend: {
display: false,
},
title: {
display: true,
text: 'Google analytics data',
fontSize: 24,
fontColor: '#6b7280',
},
tooltips: {
backgroundColor: '#17BF62',
},
scales: {
xAxes: [
{
gridLines: {
display: false,
},
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
gridLines: {
display: false,
},
},
],
},
},
}
},
}
</script>
<style>
/* Sample `apply` at-rules with Tailwind CSS
.container {
@apply min-h-screen flex justify-center items-center text-center mx-auto;
}
*/
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
I am also using tailwindcss in the project and other nuxt project options were Axios, Git, ESlint, Prettier.
Chart.js has a new release version with 3.0.x. I think, vue-chartjs does not support it yet.
You can downgrade chart.js and try again.
ChartJS [3.0.1 - Published 2 days ago] https://www.npmjs.com/package/chart.js?activeTab=readme
And there is a vue-chartjs issue about 22 hours ago.
https://github.com/apertureless/vue-chartjs/issues/695
这篇关于为什么 nuxt 使用 vue-chartjs 给我这个错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
