Question

听力Materialisecss 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

使用Materializecss Alpha和Vue

1 个答案:

没有JQuery和webpack组件