M은 Vue와 함께 Materialize-css를 사용할 때 정의되지 않습니다.

M은 Vue와 함께 Materialize-css를 사용할 때 정의되지 않습니다.

Vue와 함께 Materialize css를 사용하고 있습니다.npm 모듈로 설치하여 main.js로 Import하였습니다.

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는 정상적으로 동작하고 있습니다만, material box와 같은 javascript 컴포넌트를 사용하려고 하면

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

「M」이 정의되어 있지 않은 에러가 표시됩니다.어떻게 해야 하나?package.json에 종속적으로 materialize-css를 추가하였습니다.

컴포넌트에 다음 코드를 추가합니다(예: App.vue).

import M from 'materialize-css'

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

Vue.use는 vue 플러그인용이며 materialize-css는 vue 플러그인이 아닙니다.그리고 넌 그런 거 안 해document.querySelectorAllvue에서.또한 M ->과 같은 것을 사용할 때는 먼저 Import해야 합니다.먼저 vue 설명서를 읽고 작동 방식을 이해하십시오.

vue에는 vue-material 또는 vuetify를 사용해야 합니다.그렇지 않으면 vue를 사용하기 위해 materialize-css를 해킹하려고 하면 유지보수가 불가능한 코드가 됩니다.

저는 제 경험을 바탕으로 다른 답변을 드리려고 생각했습니다.저는 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하지만 이것이 실제로 나쁜 조언인 데에는 그럴 만한 이유가 있을 것입니다.

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

트랜스필러가 욕설을 하는 것을 방지하려면 다음과 같이 기록하십시오.

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

언급URL : https://stackoverflow.com/questions/51429968/m-is-not-defined-when-using-materialize-css-with-vue