Vue，Vuetify 没有正确初始化

Question

我在我的 Vue webpack 应用程序上设置了 Vuetify 。

我的项目设置为 vue init webpack my-project 运行 Vue 2.5.2 并使用 Vuetify 2.0.2 。

我已经安装了 Vuetify 在我的 App.js

 import Vue from 'vue'
import '../node_modules/vuetify/dist/vuetify.min.css';
import App from './App'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

一切似乎都运行良好。我可以在我的一个组件中调用 Vuetify 组件。

 <template>
  <v-container>
        <v-card width="400" height="150" raised>
          <h4>Hello</h4>
        </v-card>
  </v-container>
</template>

然后我读到我需要用 v-app 组件包装我的 App.js ，但是当我这样做时，我收到一条错误消息： Error: Vuetify is not properly initialized 。

 <template>
  <div id="app">
    <v-app>
      <NavigationBar />
      <v-content>
        <router-view />
      </v-content>
    </v-app>
  </div>
</template>

也许 Vuetify 没有正确安装，我希望你们中的一些人能对我的问题有所了解。

原文由 dumbprogrammer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

新版本有很多变化。

尝试这个

import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);

new Vue({
vuetify : new Vuetify(),
...
});

祝你好运

原文由 Ruhith Udakara 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我是这样做的（vue 3.9，vuetify 2.0）

在 main.js（或 App.js）中

import vuetify from './plugins/vuetify'
...
new Vue({
  ...
  vuetify,
  render: h => h(App)
}).$mount('#app')

在插件/vuetify.js

 import Vue from "vue"
import Vuetify from "vuetify/lib"

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'md',  // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
  },
  theme: {
    dark: false,
  },
  themes: {
    light: {
      primary: "#4682b4",
      secondary: "#b0bec5",
      accent: "#8c9eff",
      error: "#b71c1c",
    },
  },
})

在 App.vue 中

<template>
  <v-app>
    ...
  </v-app>
</template>

原文由 Patrice Flao 发布，翻译遵循 CC BY-SA 4.0 许可协议