Vue3 不显示折线图

Posted 2023-03-16

【中文标题】Vue3 不显示折线图

【英文标题】：Vue3 does not show line-chart

【发布时间】：2022-01-20 10:45:06

【问题描述】：

在我的 Vue 3 项目中，我想使用 chart.js/chartkick，但我在页面上看不到图表。

我收到此错误消息：

[Vue warn]: Failed to resolve component: line-chart 
  at <SimulateGame onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

我的 Vue：

<template>

<line-chart :data="tomb"></line-chart>

</template>

<script>
data() 
 return 
  tomb: 
        '2020-01-02': 2,
        '2020-02-03': 3,
        '2021-01-01': 5
      
  

</script>

我的 main.js：

import  createApp  from 'vue'
import App from './App.vue'
import router from './router'
import firebase from 'firebase'
import "firebase/firestore";
import Chartkick from 'vue-chartkick';
import Chart from 'chart.js';
import Vue from 'vue';


Vue?.use(Chartkick.use(Chart));

const firebaseConfig = 
    apiKey: "AIzaSyANClDMGn18RLgjFvPRf22XZ8H4mHeNoUU",
    authDomain: "vue-auth-6de17.firebaseapp.com",
    projectId: "vue-auth-6de17",
    storageBucket: "vue-auth-6de17.appspot.com",
    messagingSenderId: "207202760374",
    appId: "1:207202760374:web:9479a5450810e3b066d817"
  ;

firebase.initializeApp(firebaseConfig)

export const db = firebase.firestore();

createApp(App).use(router).mount('#app')

我使用 'Vue?.use' 因为我在 'Vue.use' 上遇到错误。

谁能知道我为什么会收到这个错误？

【参考方案1】：

这不起作用Vue?.use(Chartkick.use(Chart));

这个方法应该可以解决

const app = createApp(App);
app.use(router);
app.use(VueChartkick);
app.mount('#app');

原因是您需要在实例上use 而不是Vue。这是因为 Vue3 的工作方式发生了变化。