我想在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 } 
] 
} 

和plugins文件夹创建bxslider.js文件，然后执行以下

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