问当使用带有Vue的物化-css时，m没有定义。

EN

Vue.use是用于vue插件的。物化-css不是vue插件。你也不会在vue做document.querySelectorAll之类的事情。当您使用像M ->这样的东西时，您需要首先导入它。请先阅读vue 文档并了解它是如何工作的。

您应该使用类似于vue的vue-材料或争夺战之类的东西，或者其他方法，如果您想黑入物化-css来使用vue，那么最终您的代码并不是完全可维护的。

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

import M from 'materialize-css'

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

我想我会根据自己的经验给出一个不同的答案。我喜欢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语句相似的地方，但我相信这确实是个糟糕的建议。