在Vue中使用Materialize-css时未定义M [英] M is not defined when using Materialize-css with Vue

问题描述

我在Vue中使用Materialise CSS.我已将其安装为npm模块并将其导入main.js

I am using Materialize css with Vue. I have installed as an npm module and imported it in 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组件

All the css is working fine, however, whene I try to use any javascript component like materialbox like this

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

给出未定义"M"的错误.我应该怎么办?我已经将materialize-css添加为package.json的依赖项.

It gives an error that "M" is not defined. What should I do? I have added materialize-css as a dependency to the package.json.

推荐答案

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

Vue.use is for vue plugins. materialize-css is not a vue plugin. And you dont do stuff like document.querySelectorAll in vue. And when you use something like M -> you need to import it first. Please read vue documentation and understand how it work first.

您应该使用类似 vue-material 或

You should use something like vue-material or vuetify for vue, or otherwise if you will try to hack materialize-css to work with vue you end up in not really maintainable code

这篇关于在Vue中使用Materialize-css时未定义M的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！