javascript – Vue,Vuetify未正确初始化

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

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

我在我的App.js中安装了Vuetify

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)
})

一切似乎都很好.我可以在我的一个组件中调用Vuetifycomponents.

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

然后我读到我需要用v-app组件包装我的App.js,但是当我这样做时,我得到一个错误说：错误：Vuetify没有正确初始化.

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

也许Vuetify没有正确安装,我希望你们中的一些人能够解决我的问题.

解决方法:

我是这样做的(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>

标签：vuetify-js,javascript,vue-js
来源： https://codeday.me/bug/20191009/1875639.html