在 Vue 中使用 Materialisecss Alpha

Question

听到 Materializecss Alpha 版的发布我很兴奋，因为我是它的忠实粉丝。但是我对如何将它导入到一个典型的 vue.js 应用程序并初始化它的插件感到困惑

例如，我们如何在 Vue 中实现这一点：

var instance = new M.Carousel({
  fullWidth: true,
  indicators: true
})

Answer 1

没有 JQuery 和 webpack 组件

0) 我尝试将 1.0.0-alpha.2 与 npm (npm install materialize-css@next) 一起使用，但是...

1) 1.0.0-alpha.2 有一个 error 所以同时我直接从 github 克隆了最后一个 repo 版本，并与 npm 一起使用为 local dependency （alpha.3 之后就不需要了将被释放）：

2) 我用 vue-cli 生成了 webpack 模板

3) 我把HelloWorld组件换成了下面的……这里我把轮播初始化代码放在了组件的mounted方法中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="carousel">
      <div v-for="elem in images">
        <a class="carousel-item" :href="elem.link"><img :src="elem.img" :alt="elem.link"></a>
      </div>
    </div>
  </div>
</template>

<script>
  import M from 'materialize-css'

  export default {
    name: 'Carousel',
    mounted () {
      var elem = document.querySelector('.carousel')
      // eslint-disable-next-line
      var t = new M.Carousel(elem, {
        indicators: true
      })
    },
    data () {
      return {
        msg: 'Welcome to Your Carousel Component',
        images: [
          {
            img: 'http://quintagroup.com/cms/technology/Images/materialize.png',
            link: 'https://github.com/Dogfalo/materialize'
          },
          {
            img: 'https://vuejs.org/images/logo.png',
            link: 'https://vuejs.org/'
          },
          {
            img: 'https://avatars1.githubusercontent.com/u/9919?s=200&v=4',
            link: 'https://github.com'
          }
        ]
      }
    }
  }
</script>

4) 我将import 'materialize-css/dist/css/materialize.min.css' 添加到main.js

Answer 2

我觉得可以这么简单：

(function($){
  $(function(){
  
 $('.carousel').carousel({
    fullWidth: true,
    indicators: true
  });

  }); // end of document ready
})(jQuery); // end of jQuery name space

new Vue({
  el: '#app',
  data: {
    images: [{
        img: "http://quintagroup.com/cms/technology/Images/materialize.png",
        link: "#link1"
      },
      {
        img: "http://quintagroup.com/cms/technology/Images/materialize.png",
        link: "#link2"
      },
      {
        img: "http://quintagroup.com/cms/technology/Images/materialize.png",
        link: "#link3"
      },
      {
        img: "http://quintagroup.com/cms/technology/Images/materialize.png",
        link: "#link4"
      },
      {
        img: "http://quintagroup.com/cms/technology/Images/materialize.png",
        link: "#link5"
      }
    ]
  }
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/css/materialize.min.css">

<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/js/materialize.min.js"></script>


<div id=app>
  <div class="carousel">
    <div v-for="elem in images">
      <a class="carousel-item" :href="elem.link"><img :src="elem.img" :alt="elem.link"></a>
    </div>
  </div>

</div>