在 Vue 中使用 Materialize-css 时未定义 M答案

【问题标题】：M is not defined when using Materialize-css with Vue在 Vue 中使用 Materialize-css 时未定义 M
【发布时间】：2026-02-14 07:15:01
【问题描述】：

我正在将 Materialize css 与 Vue 一起使用。我已经安装为 npm 模块并将其导入 main.js

import Material from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import "materialize-css/dist/js/materialize.min.js";
Vue.use(Material);

所有的 css 都可以正常工作，但是，当我尝试使用像这样的材料箱这样的任何 javascript 组件时

const mb = document.querySelectorAll(".materialboxed");
M.MaterialBox.init(mb, {});

它给出了“M”未定义的错误。我该怎么办？我已将 materialize-css 添加为 package.json 的依赖项。

【问题讨论】：

遇到同样的问题，有兴趣回答。
@Badgy 因为materialize-css不是vue插件..我已经回复了

标签： vuejs2 materialize

【解决方案1】：

在您的组件中添加以下代码（例如 App.vue）：

import M from 'materialize-css'

export default {
...
mounted () {
    M.AutoInit()
},
...

【讨论】：

谢谢你帮助我。但是这种方式只导入 Materialise 语言环境（一页）。以及如何导入 Materialise Global。对于项目中的所有页面。也许在 App.vue 或 main.js 中。我不知道。 ???

【解决方案2】：

Vue.use 用于 vue 插件。 materialize-css 不是 vue 插件。而且你不会在 vue 中做 document.querySelectorAll 这样的事情。当你使用 M -> 之类的东西时，你需要先导入它。请先阅读 vuedocumentation 并了解它是如何工作的。

对于 vue，您应该使用 vue-material 或 vuetify 之类的东西，否则如果您尝试破解 materialize-css 以使用 vue，您最终会得到不可维护的代码

【讨论】：

【解决方案3】：

我想我会根据自己的经验提供不同的答案。我喜欢 Materializecss，不想使用其他东西，因为它更适合 Vuejs。 Materializecss 似乎有一个更大的社区，并且也被其他使用 Reactjs 之类的东西的人使用，所以我认为偏爱它而不是更小众的库是有点合理的。

我在main.js中使用以下内容：

import 'materialize-css/dist/css/materialize.css'
import 'materialize-css'

另外，在public/index.html 中，我有以下图标：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

对我来说，这似乎工作得非常好，包括当我使用M.Toast... 等时。我认为不同之处在于我使用import 'materialize-css' 而你有import Material from "materialize-css"。

不过，作为旁注，我在构建时确实遇到了 ESLint 错误，上面写着'M' is not defined，尽管代码实际上可以工作。 ESLint 只是不知道它的存在。为了摆脱这些，我使用了以下 hacky 方法，将下面的行放在我使用 materialize 的模块的顶部：

// Get rid of those pesky eslint errors for Materialize-css
if (typeof M == "undefined") {var M = {}}

这有很好的效果，可以向我展示它在哪里使用，与顶部的 import 语句类似，但我确信这实际上是一个糟糕的建议有充分的理由。

【讨论】：

【解决方案4】：

为M => error: 'M' is not defined (no-undef) ...

为了防止转译器骂人——写成这样：

node_modules/materialize-css/dist/js/materialize.js => **window.M**

【讨论】：