Question

我想在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中使用它。有人可以告诉我如何使用它吗？对此，我真的非常感激。谢谢

Answer 1

在~/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()
  }
}

Answer 2

Materialize CSS无法与Vue / nuxt一起正常使用，不应与它们一起使用

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

Answer 3

我正在使用它：（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

如何在nuxt.js中初始化Materialize？

html代码：

组件初始化代码：

3 个答案: