我想在nuxt.js中使用bxslider。 （vue.js）

Question

开发为nuxt.js. 我想实现一个滑块。我想使用bxslider。

来自nuxt.config.js

head: {

  script: [
    {type: 'text / javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'},
    {type: 'text / javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js'},
  ],

  link: [
    {rel: 'stylesheet', type: 'text / css', href: '//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css'},
  ],

}

我打电话给bxslider。

在vue组件中，

mounted () {
  $('.bxslider').bxSlider()
}

发生以下错误。

  

[Vue警告]：挂钩错误：＆＃34; TypeError：$（...）。 BxSlider不是函数＆＃34;

     

TypeError：$（...）。 BxSlider不是函数

有没有办法解决这个问题？

Answer 1

查看文档https://nuxtjs.org/examples/plugins

<{1>}文件中的

nuxt.config.js

并在plugins文件夹中创建module.exports = { build: { vendor: ['bxslider'] }, plugins: [ // ssr: false to only include it on client-side { src: '~/plugins/bxslider.js', ssr: false } ] } 文件并执行以下操作

bxslider.js