javascript Vue、Vuetify 未正确初始化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/57291304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue, Vuetify is not properly initialized
提问by dumbprogrammer
I have setup Vuetifyon my Vuewebpack application.
我已经Vuetify在我的Vuewebpack 应用程序上进行了设置。
My project is setup with vue init webpack my-projectrunning Vue 2.5.2and using Vuetify 2.0.2.
我的项目是通过vue init webpack my-project运行Vue 2.5.2和使用Vuetify 2.0.2.
I have installed Vuetifyin my App.js
我已经安装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)
})
Everything seems to be working fine. I'm able to call Vuetifycomponents in one of my components.
一切似乎都运行良好。我可以Vuetify在我的组件之一中调用组件。
<template>
<v-container>
<v-card width="400" height="150" raised>
<h4>Hello</h4>
</v-card>
</v-container>
</template>
I then read that I need to wrap my App.jswith the v-app component, but when I do that I get an error saying: Error: Vuetify is not properly initialized.
然后我读到我需要App.js用 v-app 组件包装我的组件，但是当我这样做时，我收到一条错误消息：Error: Vuetify is not properly initialized.
<template>
<div id="app">
<v-app>
<NavigationBar />
<v-content>
<router-view />
</v-content>
</v-app>
</div>
</template>
Maybe Vuetifyisn't installed correctly, I hope some of you can bring some light on my issue.
也许Vuetify没有正确安装，我希望你们中的一些人可以解决我的问题。
回答by Ruhith Udakara
There is lot of changes with new version.
新版本有很多变化。
try this
试试这个
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
new Vue({
vuetify : new Vuetify(),
...
});
good luck
祝你好运
回答by Patrice Flao
I do it this way (vue 3.9, vuetify 2.0)
我是这样做的（vue 3.9，vuetify 2.0）
In main.js (or App.js)
在 main.js（或 App.js）中
import vuetify from './plugins/vuetify'
...
new Vue({
...
vuetify,
render: h => h(App)
}).$mount('#app')
In plugins/vuetify.js
在插件/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",
},
},
})
in App.vue
在 App.vue
<template>
<v-app>
...
</v-app>
</template>
回答by Vishal Ghadge
If you are using vue-cli, Add these lines to file index.html after meta tags:
如果您使用的是 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/[email protected]/dist/vuetify.min.css" rel="stylesheet">
And your main.js should look like this:
你的 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/>'
})
回答by DjSh
Try adding:
尝试添加：
const opts = {
theme: {
dark: true,
themes: {
light: {
primary: '...',
...
},
dark: {
primary: '...',
...
}
}
}
}
and
和
new Vue({
el: '#app',
router,
store,
vuetify: new Vuetify(opts),
render: h => h(App)
})
to your main.js.
到您的main.js.
回答by DAVID AJAYI
Patrice has one of my preferred finely tailored answers, depending on configuration, this may be what you need:
Patrice 有我喜欢的精心定制的答案之一，根据配置，这可能是您需要的：
webpack | vue 2.5+ | vuetify 2.1+
In your main.js/App.js
在你的 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,
});
In your plugins/vuetify.js
在你的 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
},
})
In your EaxmpleComponent.vueand all other vue files:
Wrap all vue components in v-app and template tag like:
在您EaxmpleComponent.vue和所有其他 vue 文件中：将所有 vue 组件包装在 v-app 和模板标签中，例如：
<template>
<v-app>
...
</v-app>
</template>
回答by Reed Sandberg
When adding vuetify (2.x) to gridsome, I had the same problem and had to add the vuetify import object to appOptions in main.js:
将 vuetify (2.x) 添加到 gridsome 时，我遇到了同样的问题，不得不将 vuetify 导入对象添加到 main.js 中的 appOptions：
appOptions.vuetify = new Vuetify({})
as described in:
如中所述：
https://github.com/gridsome/gridsome.org/blob/master/docs/assets-css.md
https://github.com/gridsome/gridsome.org/blob/master/docs/assets-css.md
and
和
https://github.com/gridsome/gridsome/issues/603#issuecomment-567056678
https://github.com/gridsome/gridsome/issues/603#issuecomment-567056678
