javascript - 如何在 vuejs 中使用光滑的滑块？

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: Unexpected token (122:21)。

有人可以指导我如何在 vuejs 中使用 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
}

标签： javascriptvue.jsslick.jsvue-cli-3