我想在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)