v-app 未使用 vuetify 显示页面布局答案

【问题标题】：v-app not showing page layout using vuetifyv-app 未使用 vuetify 显示页面布局
【发布时间】：2020-09-08 21:40:28
【问题描述】：

我正在使用 vuetify 版本 2.3.10。我有一个布局有点像这样的文件

<template>
  <v-app>
    <div>
     <Users />
    </div>
  </v-app>
</template>

<script>
 import Users from 'views/users.vue';
 export default {
  components: {
    Users
  },
</script>

但是“你好”没有显示在浏览器上。但是如果我删除这样的标签。

<template>
    <div>
      <Users />
    </div>
</template>

然后在浏览器中我收到此错误。无法读取未定义的属性“mobileBreakpoint”。请帮我解决这个问题。

users.vue(组件)

<template>
  <div>
      <p>Hello</p>
  </div>
</template>

【问题讨论】：

您的导入不应该是相对路径还是至少应该以@ 别名为前缀，例如import Users from "@/views/users.vue"？
@Phil 我试过你从“@/views/users.vue”导入用户的东西，但它给了我一个错误，找不到模块
@Phil 我在我的 Rails 应用程序中使用 vue 作为前端。所以路径是views/users.vue
我真的不知道这意味着什么。当您使用import 时，如果它不是相对或绝对路径，它会在node_modules 中查找，因此除非您的users.vue 文件位于node_modules 中的view 包下，否则您的导入路径不正确。现在我再问一句，你的两个.vue文件在你的Vue应用中的路径是什么？
@Phil 为父文件，路径为“views/index.vue”，组件文件路径为“views/users.vue”。我正在将 vuetify 1.5 版迁移到 2.3 版。该组件适用于 1.5 版，但不适用于 2.3。如果有任何帮助，请提供额外信息。

标签： javascript vue.js vuetify.js

【解决方案1】：

index.js

问题就在这里。我忘了添加 vuetify : new Vuetify()，问题解决了。

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

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

【讨论】：

【解决方案2】：

在您的用户组件中也应该有一个export default 语句（没有它，您以后无法导入它）并给它name: 'Users' 以进行良好的衡量。然后它应该按预期工作。最好也将您的组件存储在components 中。 views 适用于拥有自己的 route 的所有内容。

Users.vue

<template>
  <div><p>Hello</p></div>
</template>

<script>
 export default {
  name: 'Users',
 }
</script>

其他.vue

<template>
  <v-app>
    <div>
     <Users />
    </div>
  </v-app>
</template>

<script>
 import Users from '@/components/users.vue';
 export default {
  components: {
    Users
  },
</script>

【讨论】：

找不到模块：错误：无法解析“@/components/users.vue”。我已将用户组件存储在组件文件夹中
@user12763413 抱歉，我不知道您的确切项目结构和文件在其中的位置，所以我不得不猜测一下路径。但是因为 at 符号指向 src 文件夹，所以它实际上应该可以工作。

【解决方案3】：

我和你一样正在将 vuetify 1.5 版迁移到 2.3 版

就我而言，

包含负 z-index

检查你的样式表

【讨论】：