问题描述
我是 Vue 世界的初学者,所以请容忍我愚蠢的问题.
我有一个 Vue 项目的样板代码,我从中克隆了:
这里也是开发工具快照:
如您所见,正在引用 vuetify.min.css,我无法调试为什么这不符合 Vuetify 指南的行为.
我遗漏了哪些步骤?
对我来说解决这个问题的是在最顶部的 html 标签(或第一个标签)添加 class .v-application
template
标签之后).通常,如果我添加 <v-app>
一切正常,但由于某种原因使用 vuitify 2.0.4 这不起作用(可能是因为我没有使用 vue-cli 和 webpack,而是包裹.js).
所以添加这个类为我解决了同样的问题.
编辑
其实我刚刚发现为什么 v-app
被忽略了.因为我使用的是 vuetify 2.0.4.如果没有 vue-cli 和 webpack,我需要像这样自己包含 vuetify 组件:
从'vue'导入Vue导入 Vuetify,{电子卡,Vmg,VCardTitle,VBtn,VCardActions,VCardText,VProgressCircular,VSpacer,对话框,分频器,警告,应用程序,来自'vuetify/lib'Vue.use(Vuetify, {成分: {电子卡,Vmg,VCardTitle,VBtn,VCardActions,VCardText,VProgressCircular,VSpacer,对话框,分频器,警告,应用程序,},})导入 'material-design-icons-iconfont/dist/material-design-icons.css';导出默认的新 Vuetify({})
然后像这样导入到 vue 应用程序中:
从vue"导入Vue;从 './src/vuetify' 导入 vuetify从./src/App.vue"导入 VocabularyApp;新的 Vue({验证,渲染:h =>h(词汇应用)}).$mount('#app-tutor');
因此 v-app 无法运行,因为我没有将它包含在我的应用程序运行所需的组件列表中.您可以在此处找到更多信息.
I am a beginner in the world of Vue, so please bear with my foolish question(s).
I have a boilerplate code for a Vue project which I cloned from:Vue Enterprise Boilerplate
I wanted to use Vuetify components, so I followed the following steps:
1. Cloned the vue-enterprise-boilerplate
2. npm install vuetify --save
3. In my main.js I added the vuetify dependency like:
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
4. I am using Vue CLI 3 (which comes with the boilerplate), also I have installed the CCS Loader.
5. Now in my app.vue, I have a simple button like:
<v-app>
<v-btn color="primary">Test</v-btn>
</v-app>
But when I run the app, I only see the outline of the button, but the styles are missing. Here is a screenshot below:
Also here is the dev-tools snapshot:
As you can see, the vuetify.min.css is being referenced, I am unable to debug why this is not behaving as per the Vuetify guides.
What steps am I missing?
What fixed the issue for me was the adding of class .v-application
at the top most html tag (or the first one after template
tag). Usually if I add <v-app>
it all works but for some reason using vuitify 2.0.4 this didn't worked (may be because I'm not using vue-cli and webpack but parcel.js).
So adding this class solved the same issue for me.
EDIT
Actually I just found why v-app
was ignored. Since I'm using vuetify 2.0.4. without vue-cli and webpack I need to include the vuetify components by my self like so:
import Vue from 'vue'
import Vuetify, {
VCard,
VImg,
VCardTitle,
VBtn,
VCardActions,
VCardText,
VProgressCircular,
VSpacer,
VDialog,
VDivider,
VAlert,
VApp,
} from 'vuetify/lib'
Vue.use(Vuetify, {
components: {
VCard,
VImg,
VCardTitle,
VBtn,
VCardActions,
VCardText,
VProgressCircular,
VSpacer,
VDialog,
VDivider,
VAlert,
VApp,
},
})
import 'material-design-icons-iconfont/dist/material-design-icons.css';
export default new Vuetify({})
Which is then imported in the vue app like this:
import Vue from "vue";
import vuetify from './src/vuetify'
import VocabularyApp from "./src/App.vue";
new Vue({
vuetify,
render: h => h(VocabularyApp)
}).$mount('#app-tutor');
So v-app wasn't working as I didn't included it in the list of components that I need for my app to work. More you can find here.
这篇关于Vuetify 样式不可见的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!