我想在 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 warn]: Error in mounted hook: "TypeError: $ (...). BxSlider is not a function"

TypeError: $ (...). BxSlider is not a function

有办法解决吗？

Answer 1

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

在nuxt.config.js文件中

module.exports = {
  build: {
    vendor: ['bxslider']
  },
 plugins: [
   // ssr: false to only include it on client-side
   { src: '~/plugins/bxslider.js', ssr: false }
 ]
}

并在插件文件夹中创建 bxslider.js 文件并执行以下操作

import Vue from 'vue'
import bxslider from 'bxslider'
Vue.use(bxslider)

我想在 nuxt.js 中使用 bxslider。 (vue.js)

I want to use bxslider in nuxt.js. (vue.js)

javascript

jquery

vue.js

bxslider

nuxt.js