Question

我是Vue领域的初学者，所以请忍受我的愚蠢问题。
我有一个Vue项目的样板代码，它是从以下代码克隆的： Vue Enterprise Boilerplate

我想使用Vuetify组件，所以我遵循以下步骤：
1.克隆Vue-Enterprise-Boilerplate
2. npm install vuetify --save
3.在我的main.js中，添加了vuetify依赖项，例如：

import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

4。我正在使用Vue CLI 3（样板随附），还安装了CCS Loader。
5.现在在我的app.vue中，有一个简单的按钮，如：

<v-app>
  <v-btn color="primary">Test</v-btn>
</v-app>

但是，当我运行该应用程序时，我只看到按钮的轮廓，但是样式丢失了。这是下面的屏幕截图：

这也是dev-tools快照：

如您所见，正在引用vuetify.min.css，但我无法调试为什么不按照Vuetify指南进行操作。

我错过了哪些步骤？

Answer 1

对我来说，解决此问题的方法是在最顶部的html标签（或在.v-application标签之后的第一个html标签）中添加类template。通常，如果我添加<v-app>都可以，但是出于某种原因使用vuitify 2.0.4则无法正常工作（可能是因为我没有使用vue-cli和webpack，而是使用了parcel.js）。

因此添加此类可以为我解决相同的问题。

编辑

实际上，我只是找到了为什么v-app被忽略的原因。由于我正在使用vuetify 2.0.4。没有vue-cli和webpack，我需要自己添加vuetify组件，就像这样：

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

然后将这样导入到vue应用中：

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');

因此v-app无法正常运行，因为我没有将其包含在我的应用正常运行所需的组件列表中。您可以找到更多here。

Answer 2

欢迎来到vue的美好世界。

您正在查看阴影dom，请检查按钮元素而不是按钮元素内部的div元素。 div的父按钮元素将根据您提供的道具具有类似.primary .error的类。

查看屏幕截图：

我希望这会有所帮助。

Answer 3

我认为这主要是企业模板代码附带大量UI样式的问题，并且与Vuetify按钮CSS或类似内容冲突。您可能需要选择更完整地使用企业模板（不使用Vuetify），或者选择更通用的Vue / Vuetify默认设置。例如安装了vue-cli 3后，只需：

vue create my-app
cd my-app
vue add vuetify

请参见https://vuetifyjs.com/en/getting-started/quick-start#vue-cli-3

我知道这对于实际回答您所问的问题不是特别有用，但是我的直觉是您可能需要重新考虑该方法并采用更主流的vue + vuetify，或者问一下当在该特定网站实施中使用替代UI库（Vuetify）时，样板的提供者将寻求帮助。

Answer 4

在我的情况下，我使用了手写笔，并在vue.config.js中使用了css.requireModuleExtension = false选项。样式只是没有加载。将其切换到true或删除此选项即可达到目的。

// vue.congif.js

module.exports = {
  // ...
  css: {
    // ...
    requireModuleExtension: true
  }
  // ...
}

Vuetify样式不可见

4 个答案: