Vue，Vuetify未正确初始化

Question

我已经Vuetify在我的Vuewebpack应用程序上进行了设置。

我的项目已设置为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>

然后我读，我需要换我App.js与V-应用程序组件，但是当我这样做，我得到一个错误说：Error: Vuetify is not properly initialized。

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

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

Answer 1

新版本有很多变化。

尝试这个

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

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

祝你好运

Answer 2

如果您使用的是 vue-cli，请将这些行添加到文件 index.html 的元标记之后：

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

你的 main.js 应该是这样的：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'

Vue.config.productionTip = false
Vue.use(Vuetify)
export default new Vuetify({ })

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  vuetify: new Vuetify(),
  components: { App },
  template: '<App/>'
})

Answer 3

我这样做（vue 3.9，vuetify 2.0）

在main.js（或App.js）中

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

在plugins / 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>