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

Question

我在 Vue 中使用 Materialize css。我已经安装为 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 组件，例如像这样的 materialbox

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

报错"M"未定义。我应该怎么办？我添加了 materialize-css 作为对 package.json.

的依赖

Answer 1

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

你应该为 vue 使用类似 vue-material or vuetify 的东西，否则如果你试图破解 materialize-css 来与 vue 一起工作，你最终会得到真正无法维护的代码

Answer 2

我想我会根据自己的经验提供不同的答案。我喜欢 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 语句类似，但我确信有充分的理由说明这实际上是一个糟糕的建议。

Answer 3

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

import M from 'materialize-css'

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

Answer 4

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

为了防止转译器发誓 - 写成：

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

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

M is not defined when using Materialize-css with Vue

materialize

vuejs2