Vue.js 将ECSS Alpha与Vue一起使用

听到ECSS Alpha版本，我很兴奋，因为我是它的超级粉丝。但我对如何将其导入典型的vue.js应用程序并初始化插件感到困惑

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

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

---

我认为它可以是这么简单：

（函数（$）{
$（函数（）{
$（'.carousel'）。carousel({
全宽：对，
指标：正确
});
})；//文档结束准备就绪
})（jQuery）；//jQuery名称空间的结尾
新Vue({
el:“#应用程序”，
数据：{
图像：[{
img:“http://quintagroup.com/cms/technology/Images/materialize.png",
链接：“链接1”
},
{
img:“http://quintagroup.com/cms/technology/Images/materialize.png",
链接：“链接2”
},
{
img:“http://quintagroup.com/cms/technology/Images/materialize.png",
链接：“链接3”
},
{
img:“http://quintagroup.com/cms/technology/Images/materialize.png",
链接：“链接4”
},
{
img:“http://quintagroup.com/cms/technology/Images/materialize.png",
链接：“链接5”
}
]
}
})

不带JQuery和webpack组件 0）我尝试将1.0.0-alpha.2与npm一起使用（

npm安装具体化）-css@next

）但是

1） 1.0.0-alpha.2有一个so，同时我直接从npm as克隆了最后一个回购版本，并与npm as一起使用（在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>

{{msg}}
从“物化css”导入M
导出默认值{
名称：'旋转木马'，
挂载（）{
var elem=document.querySelector（“.carousel”）
//eslint禁用下一行
var t=新的旋转木马（elem{
指标：正确
})
},
数据（）{
返回{
msg:'欢迎使用您的旋转木马组件'，
图像：[
{
img:'http://quintagroup.com/cms/technology/Images/materialize.png',
链接：'https://github.com/Dogfalo/materialize'
},
{
img:'https://vuejs.org/images/logo.png',
链接：'https://vuejs.org/'
},
{
img:'https://avatars1.githubusercontent.com/u/9919?s=200&v=4',
链接：'https://github.com'
}
]
}
}
}

---

4） 我将

import'materialize css/dist/css/materialize.min.css'

添加到

main.js

我根本不想使用Jquery，我正在使用Vue cli网页包模板。请参阅我的新答案