如何在 nuxt.js 中初始化 Materialise？答案

【问题标题】：How can I init Materialize in nuxt.js?如何在 nuxt.js 中初始化 Materialise？
【发布时间】：2019-01-20 03:51:21
【问题描述】：

我想在 nuxt.js 中使用这些神奇的东西，服务器端渲染很重要。但是官方网站上的教程不是很清楚，我得到了一些错误。我运行命令“npm i materialize-css”来安装它。下面的版本： "materialize-css": "^0.100.2"

我使用正常的方式来初始化“下拉”组件，当我在按钮上移动鼠标或单击按钮时，什么也没发生。 “下拉菜单”不起作用。

html代码：

<ul class="right hide-on-med-and-down">
    <li>
        <a class="font-color" href="#">
            <i class="material-icons right">chrome_reader_mode
            </i>Blog
        </a>
    </li>
    <li>
        <a class="dropdown-button font-color" data-activates="drop-list">
            <i class="material-icons right">arrow_drop_down
            </i>Test
        </a>
    </li>
</ul>

<!--dropdown list-->
<ul id='drop-list' class='dropdown-content'>
    <li>
        <a href="#!" class="grey-text">A</a>
    </li>
    <li class="divider" tabindex="-1"></li>
    <li>
        <a href="#!" class="grey-text">B</a>
    </li>
    <li class="divider" tabindex="-1"></li>
    <li>
        <a href="#!" class="grey-text"><i class="material-icons ">message</i>C
        </a>
    </li>
</ul>

组件初始化代码：

mounted() {
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.dropdown-button');
        let options={
          inDuration: 300,
          outDuration: 225,
          constrainWidth: true, // Does not change width of dropdown to that of the activator
          hover: true, // Activate on hover
          gutter: 0, // Spacing from edge
          belowOrigin: true, // Displays dropdown below the button
          alignment: 'left', // Displays dropdown with edge aligned to the left of button
          stopPropagation: false // Stops event propagation
        }
        var instances = M.Dropdown.init(elems, options);
    });
}

然后我尝试通过 jquery 初始化它，但我也得到了错误。

'$ 未定义'。或“$.dropdown() 不是函数”

我不知道如何将 jquery 和具体化导入到我的 nuxt.js 项目中。这是jquery的初始化代码。

mounted(){
    $('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrainWidth: true, // Does not change width of dropdown to that of the activator
      hover: true, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: true, // Displays dropdown below the button
      alignment: 'left', // Displays dropdown with edge aligned to the left of button
      stopPropagation: false // Stops event propagation
    });
}

'nuxt.config.js'：

module.exports = {
    css: [
        'materialize-css/dist/css/materialize.css'
    ],
    plugins: [
        $:jquery
    ]
  ......
}

现在我不知道如何在 nuxt.js 中使用它。谁能告诉我如何使用它？对此，我真的非常感激。谢谢

【问题讨论】：

标签： vue.js materialize nuxt.js

【解决方案1】：

Materialize css 不适用于 Vue/nuxt，它不应该与它们一起使用

你应该在 Vue/nuxt 中使用 vuetify/vue-material。

【讨论】：

但是Materialize css看起来很漂亮，以后会支持SSR/Nuxt.js吗？
@Kylw.Wilson 我不这么认为。这将是一次彻底的重写。正如我所说，Vue 已经有材料设计框架，它是 vuetify 和 Vue 材料

【解决方案2】：

我正在使用这个：（nuxt.config.js 部分，请参阅插件部分）：

```

css: [
    '~/assets/css/main.css',
    '~node_modules/materialize-css/dist/css/materialize.css'
  ],
  build: {
    vendor: ['axios'],
    /*
    ** Run ESLINT on save
    */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Materialize: 'materialize-css'
      })
    ],
  }

```

现在我可以初始化类似 select 的东西（在任何页面上）： ```

created () {
    if (process.client) {
      $(document).ready(() => {
        const elem = document.querySelector('select')
        Materialize.FormSelect.init(elem)
      })
    }
  }

```

当然，别忘了安装 jquery： npm i jquery --save

【讨论】：

【解决方案3】：

在~/plugins/materialize.js

import M from 'materialize-css'
export default ({ app }, inject) => {
  inject('M', M)
}

在nuxt.config.js

export default {
  css: [ 'materialize-css/dist/css/materialize.min.css' ],
  plugins: [{ src: '~/plugins/materialize.js', mode: 'client' }]
}

现在$M 可以从上下文中访问，并且可以在页面、组件、插件和存储操作中访问。

在example-component.vue

export default {
  mounted() {
    this.$M.AutoInit()
    // will init Materialize
  },
  asyncData({ app, $M }) {
    $M.updateTextFields()
    // If using Nuxt <= 2.12, use ?
    app.$M.updateTextFields()
  }
}

【讨论】：