如何在Vue.js中使用滑动滑块？

Question

我有一个组件文件，该文件中需要滑块。这就是我如何初始化浮华的方式。

import Slick from 'vue-slick'

components: { Slick },
data() {
  return {
    slickOptions: {
      //options can be used from the plugin documentation
      slidesToShow: 4,
      infinite: true,
      accessibility: true,
      adaptiveHeight: false,
      arrows: true,
      dots: true,
      draggable: true,
      edgeFriction: 0.30,
      swipe: true
    }
  }
},
// All slick methods can be used too, example here
methods: {
  next() {
    this.$refs.slick.next()
  },
  prev() {
    this.$refs.slick.prev()
  },
  reInit() {
    // Helpful if you have to deal with v-for to update dynamic lists
    this.$refs.slick.reSlick()
  }
}

但是我遇到多个错误。

1-错误解析错误：意外的令牌。

2-模块构建失败（来自./node_modules/babel-loader/lib/index.js）： SyntaxError：意外令牌（122：21）。

有人可以指导我如何在Vue.js中使用Slick吗？我以前在jquery中使用过slick。

webpack.config.js代码

  module.exports = function (config, { isClient, isDev }) {
    module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        loader: 'file-loader'
      }
    ]
  }
  build: {
    extend (config, { isServer }) {
      if (isServer) {
        config.externals = [
          require('webpack-node-externals')({
            whitelist: [/^vue-slick/]
          })
        ]
      }
    }
  }
  return config
}