Vuetify 样式不可见 [英] Vuetify Styles not visible

问题描述

我是 Vue 世界的初学者，所以请容忍我愚蠢的问题.
我有一个 Vue 项目的样板代码，我从中克隆了:

这里也是开发工具快照:

如您所见，正在引用 vuetify.min.css，我无法调试为什么这不符合 Vuetify 指南的行为.

我遗漏了哪些步骤?

解决方案

对我来说解决这个问题的是在最顶部的 html 标签(或第一个标签)添加 class .v-applicationtemplate 标签之后).通常，如果我添加 <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 样式不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！