Question

我在Vuetify Webpack应用程序中设置了Vue。

我的项目是通过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的安装不正确，希望你们中的一些人能对我的问题有所了解。

Answer 1

我这样做（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>

Answer 2

如果您使用的是vue-cli，请将以下行添加到meta标记后的文件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

尝试添加：

const opts = {
  theme: {
    dark: true,
    themes: {
      light: {
        primary: '...',
        ...
      },
      dark: {
        primary: '...',
        ...
      }
    }
  }
}

和

new Vue({
  el: '#app',
  router,
  store,
  vuetify: new Vuetify(opts),
  render: h => h(App)
})

发送到您的main.js。

Answer 4

新版本有很多更改。

尝试

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

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

祝你好运

Answer 5

Patrice提供了我偏爱的精细定制答案之一，具体取决于配置，这可能是您需要的：

webpack | vue 2.5+ | vuetify 2.1+

在您的main.js / App.js中

import Vue from 'vue'
import router from './router'
import vuetify from './plugins/vuetify' // path to vuetify export

//Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
el: '#app',
router,
vuetify,
});

在您的plugins / vuetify.js中

// resources/js/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

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

Vue.use(Vuetify)

const opts = {}

export default new Vuetify({
  icons: {
    iconfont: 'md', // default - only for display purposes
  },
})

在您的EaxmpleComponent.vue和所有其他vue文件中：将所有vue组件包装在v-app和模板标签中，例如：

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

Answer 6

向网格物体添加vuetify（2.x）时，我遇到了同样的问题，不得不将vuetify导入对象添加到main.js中的appOptions中：

appOptions.vuetify = new Vuetify({})

如以下所述：

https://github.com/gridsome/gridsome.org/blob/master/docs/assets-css.md

和

https://github.com/gridsome/gridsome/issues/603#issuecomment-567056678

Answer 7

我遇到了同样的问题。

vuetify@2.3.2
vue@2.6.11
nuxt@2.13.0
+ typescript

我在下面解决了。

[layouts / default.vue]

<script  lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Vuetify from 'vuetify'

@Component({
  vuetify:new Vuetify()
})
export default class extends Vue {
}
</script>

如果您没有打字稿
下面可以帮助您。

<script>
import Vuetify from 'vuetify'

export default {
vuetify: new Vuetify(),
}
</script>

Answer 8

下面的链接帮助了我。

https://www.codetd.com/en/article/7261224

从'vue'导入Vue 从'./App.vue'导入应用程序从 './router/index' 导入路由器从'./store/index'导入商店

从 'vuetify' 导入 Vuetify 导入'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false

Vue.use(Vuetify) // vuetify自定义配置导出默认的新 Vuetify({})

新的Vue({ 路由器，店铺， vuetify: 新的 Vuetify(), 渲染：h => h(App) }).$mount('#app')

Vue，Vuetify未正确初始化

8 个答案: