Vuetify

商店

企业版

有一个问题?在创建问题表之前,请检查一些常见的错误。如果你仍然找不到解决办法,你可以在 Github 上提交一个 issue 或者在我们的 community 进行询问。

由于 sass/scss 错误,我的应用程序无法编译

确保您使用的选项对象与您的 sass-loader 版本一致。

是否有 v2 grid 与 v1.5 相对比的示例?

是的,您可以在这里查看 view grid examples here

Error: Cannot find module 'node-sass'

请检查本地项目 package.json 文件中的 @vue/cli packages 项至少是 ^3.5.0 版本

Invalid CSS after " @content": expected "}", was "($material-light); "

请检查本地项目 package.json 文件中使用的是 sass 而不是 node-sass

我的代码不工作 - 我应该怎么办

首先,确保你使用的是最新版本的 Vue.js 和 Vuetfiy。然后尝试在 codepen 的 template 上复现你的问题。如果在外部环境中问题没有复现,这通常意味着问题是出在本地的环境。如果你仍然无法解决,请在 community 中的 #need-help 节点提供你的 codepen 和 issue。

我在控制台中收到了一个类似于下面的错误:
$attrs is readonly 或者 $listeners is readonly

Vuetify 使用 Typescript,目前必须导入和继承 Vue 对象。在某些应用程序中,这可能会生成警告。目前有一个正在进行的 Github 讨论,为各种用例提供潜在的解决方案。如果你还有额外的问题,请加入我们的 在线社区

我收到了一个类似于下面的错误:
Error in ./node_modules/vuetify/src/dir/file.js Module parse "failed": Unexpected token (<lineno>:<characterno>)

如果你使用像 IntelliJ IDEA 或 WebStorm 这一类的 IDE,它通常在你使用组件时会自动导入 vuetify/src/ 目录。请将导入设置中的 vuetify/src/ 改变为 vuetify/es5/

在 codepen 上是否有带有路由的模板

我如何扩展 Vuetify 组件

通过导入 Vuetify 组件,并使用 vue 中的 extends 选项,就可以很容易地进行扩展。Codepen 示例

我的应用程序看起来不正常

Vuetify 需要使用 v-app 组件。它应该包裹着你的整个应用程序,是包括主题在内的大部分框架功能的中心点。请确保你在 Application 页面中使用了正确的标记方式。

菜单/对话框/侧边导航没有正常打开。

请检查你的组件在 v-app 在元素之中。如果你激活的元素未放入 activator 插槽里,请确保停止单击事件的传播。这些组件使用 v-outside-click 指令并且会立即关闭。

即使我的内容没有垂直溢出,但是滚动条也会显示。

Vuetify 使用 ress reset 来重置滚动条在不同浏览器中的默认行为。我们对这个选择进行了多次讨论。使用它有利有弊,目前社区投票的结果是保留使用它。如果你希望禁用此功能,请在你的样式文件中添加 html { overflow-y: auto }

如何垂直居中

fill-height prop 应用在 v-container。这个助手类只会添加 height: 100%,但是对于 container 来说,它会寻找子元素 v-layout 并且按照所需的类来垂直居中你的内容。

我访问 //home page 都会出现 active 样式

为指向路由的绝对链接 /. 添加 exact。更多信息请查阅官方路由 文档

我的页面在手机中不是响应式的

请检查在 index.html 中 <head> 部分拥有正确的 meta 标记。

我应该怎么使用 Font Awesome, Material Design Icons or Material Icons?

请参阅我们的 icon guide

我的对话框中点击按钮后立即关闭

例如,在 v-menuv-dialog 未使用 activator 插槽时,你必须使用点击事件来手动停止 propagation_。非常简单的,添加 _.stop 来修改点击事件。

Relative 图像在 v-card , v-img 和其他自定义 vuetify 组件中无法正常工作

Vue loader 会自动地把相对路径转换为 require 函数。然而在定制组件中 Vue loader 不会做这样的处理。您可以通过显式使用 require 函数来避免这个问题。如果您正在使用 Vuetify 为 Vue CLI 提供的插件,您可以编辑项目中的 vue.config.js 来修改 vue-loader 的配置项。

我应该如何升级到最新版本

所有需要的更改都在我们发布的 升级指南 中注明。

如何报告错误或请求一个功能

为了确保提供所有所需的信息,我们已经创建了一个 Issue Generator 帮助您实现这个过程。任何不使用生成器创建的问题将自动关闭,所以请使用它。

vuetify-loader 没有加载所有组件

Vuetify-loader 在 dynamic 组件中有局限性。请查阅 limitations 获取更多信息。

1.5 版本将被支持多久?

到 2020 年 7 月,可以在 Long-term Support page 上参阅更多信息。

我在哪里能看到 v1.5 的文档?

[Vue warn]: Unknown custom element:

请检查 package.json 中使用的是最新版本的 vue-cli-plugin-vuetifyvuetify-loader

SCRIPT5022: Expected identifier, string or number

为了支持 vue-cli-3 中的 modern modevuetify/lib 没有被转译。你必须告诉 vue-cli 转译 vuetify 包。这在安装 Vuetify cli 插件时就自动配置了。如果你使用的是老版本,只需要简单的将 'vuetify' 添加到 vue.config.js 中的 transpileDependencies 数组里面。

添加 typescript 时 - Error: Could not find a declaration file for module 'vuetify/lib'

在您的 tsconfig 文件中添加以下内容:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!