Vue3中如何将Google Charts与Vuetify从Vue.use改为新插件实现？

核心错误点说明 #

你尝试的写法存在两个关键问题：

1. Vue Google Charts不存在createCharts这个API，无需手动创建图表实例
2. Vue3中插件注册是通过**应用实例（app）**调用use，而非插件实例自身调用use

正确代码实现 #

1. 修正后的vuetify.js

import "@fortawesome/fontawesome-free/css/all.css";
import "material-design-icons-iconfont/dist/material-design-icons.css";
import "vuetify/styles";
import { createVuetify } from "vuetify";
import colors from "vuetify/lib/util/colors";

// Vue3中无需在此调用Vue.use(Vuetify)，createVuetify直接返回可注册的实例
export default createVuetify({
  icons: {
    iconfont: "md" || "fa",
  },
  theme: {
    themes: {
      light: {
        background: colors.blue.accent2,
      },
      dark: {
        background: colors.blue.base, // 用base明确获取十六进制色值
      },
    },
  },
});

2. 在main.js中统一注册插件

Vue3的插件注册必须基于createApp创建的应用实例完成，把Vuetify和Vue Google Charts的注册都放在这里：

import { createApp } from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import VueGoogleCharts from 'vue-google-charts';

const app = createApp(App);

// 注册Vuetify
app.use(vuetify);
// 全局注册Vue Google Charts
app.use(VueGoogleCharts);

app.mount('#app');

组件中使用说明 #

完成上述注册后，你可以在Home.vue中直接使用Vue Google Charts的<GChart>组件，无需额外导入或处理，示例：

<template>
  <GChart
    type="BarChart"
    :data="chartData"
    :options="chartOptions"
  />
</template>

<script setup>
const chartData = [
  ['Year', 'Sales', 'Expenses'],
  ['2021', 1000, 400],
  ['2022', 1170, 460],
  ['2023', 660, 1120],
];

const chartOptions = {
  title: 'Company Performance',
  width: 600,
  height: 400,
};
</script>

内容的提问来源于stack exchange，提问作者Eve