jquery - Vue CLI 4 项目中 materialize.js 1.0.0 和 jQuery 3.5.1 的问题

Question

我第一次来这里。我是 Vue.js 的新手，我也是第一次尝试 Vue CLI。我想在 Vue CLI 4 项目中尝试 Materialize CSS，但我在使用 jQuery 部分时遇到了问题。

只需尝试使用移动设备的 sidenav 来查看所有内容即可使用该框架。但是当我使用sidenav()时，控制台中会出现一个错误，指示"$(...).sidenav is not a function". 我在 Stack Overflow 中发现了同样的错误，但解决方案对我不起作用。我不想<link>在 index.html 中使用标签。我想使用 main.js 和 .vue 文件。jQuery 工作正常并且正在被识别，我用console.log($(".sidenav").html());哈哈检查了它。

由于这是我第一次在 Vue CLI 项目中使用这些文件，我认为我没有正确导入它们，所以我使用 Bootstrap（不是 Bootstrap-Vue）创建了另一个 Vue CLI 项目。在使用 jQuery 的 Bootstrap 项目中一切正常。所以，我认为问题是materialize.js。

顺便说一句，使用纯 JavaScript（来自 Materialize Docs）是可行的，但使用 jQuery 则不行。

笔记：

 - Instead of using "$(function() { /* jQuery code here */ });", I use the jQuery code in the "mounted()" hook. The same for the Bootstrap project.
 - In a single HTML file (not a Vue CLI project) it works fine with jQuery (I'm using the same code).
 - Materialize CSS v1.0.0-rc.2 (according to package.json | npm install materialize-css@next --save). Also tried "npm install materialize-css@1.0.0 --save" as it's the version I used in single HTML file, but it didn't work either.
 - jQuery v3.5.1 (npm install jquery --save). Tried v2.2.4 but the same problem.
 - Using default option at vue create (babel, eslint).
 - @vue/cli 4.4.1
 - node 12.18.0
 - npm 6.14.4

你能帮我么？提前致谢。

src/main.js

import Vue from 'vue'
import App from './App.vue'

import './assets/css/material-icons.css';
import 'materialize-css/dist/css/materialize.min.css'
import './assets/css/estilos.css';
import $ from 'jquery';
import Materialize from 'materialize-css'

export const jquery = $;
export const materialize = Materialize;
// Vue.use(Materialize) // Tal vez para el JavaScript de Materialize

Vue.config.productionTip = false

new Vue({
  // Materialize, // Tal vez para el JavaScript de Materialize
  render: h => h(App),
}).$mount('#app')

src/App.vue

<template>
  <div id="app">
    <headerMenu></headerMenu>
  </div>
</template>

<script>
import headerMenu from './components/headerMenu.vue'

export default {
  name: 'App',
  components: {
    headerMenu
  }
}
</script>

src/components/headerMenu.vue（注释代码是可以正常工作的纯 JavaScript）

<template>
  <div>
    <nav class="nav-wrapper">
      <div class="container">
        <a href="#" class="brand-logo">Site Title</a>
        <a href="#" class="sidenav-trigger" data-target="enlaces-moviles">
          <i class="material-icons">menu</i>
        </a>
        <ul class="right hide-on-med-and-down">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>
    </nav>

    <ul class="sidenav" id="enlaces-moviles">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</template>

<script>
import { jquery } from '../main';
// import { materialize } from '../main';

export default {
  mounted() {
    const $ = jquery;
    window.$ = $; // Creo que esta línea debería omitirse, de todos modos funciona sin ella.
    window.jQuery = jquery; // Tal vez una opción más.
    $(".sidenav").sidenav();

    /* const M = materialize;
    var elems = document.querySelectorAll('.sidenav');
    M.Sidenav.init(elems); */
  }
}
</script>

错误： error_in_console.png

标签： jqueryvue.jscommand-line-interfacematerialize