Question

我在Vue中使用Materialise 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都工作正常，但是，当我尝试使用任何像materialbox这样的javascript组件

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

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

Answer 1

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

import M from 'materialize-css'

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

Answer 2

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

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

Answer 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只是不知道它在那里。为了消除这些问题，我使用了以下巧妙的方法，将行下面的行放在使用物化的模块顶部：

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

这具有很好的效果，可以向我展示它的用法与顶部的import语句相似，但是我敢肯定有充分理由说明这实际上是一个错误的建议。

Answer 4

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

为防止编译器发誓-编写如下：

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

将Materialize-css与Vue结合使用时

4 个答案: