Vue3 不显示折线图

Question

在我的 Vue 3 项目中我想使用图表。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' 上出错了。

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

Answer 1

这行不通Vue?.use(Chartkick.use(Chart));

这里有一个方法可以解决它

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

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

Vue3 不显示折线图

Vue3 does not show line-chart

javascript

chartkick

chart.js

vuejs3