vue使用bootstrap轮播的插件。显示.carousel is not a function

Question

$('#myCarousel').carousel('pause');这个是按照教程上的方式写的。求大神指点

Answer 1

楼上说了，Bootstrap依赖jQuery，这是没错的，但是在Vue里面使用Bootstrap是不需要重写所有插件的。

解决方法如下：

在main.js里依次载入jQuery的JS，Bootstrap的JS和CSS（用import xxx.js或import xxx.css），如果是用npm install装上的jQuery和Bootstrap，那么加载语句类似

import 'jquery/dist/jquery.js'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

其中，后缀名.js是可以省略的。

然后，这样还无法使Vue识别到加载进去的jQuery插件，所以需要在打包配置中加入一些新内容。
在build\webpack.base.conf.js配置文件中添加plugins配置（如果原来就有此配置部分则直接将内容添加进去即可），修改完的build\webpack.base.conf.js文件类似：（部分无关代码被省略）

var path = require('path');
...
var webpack = require('webpack'); // 注意这一行一定要加上，原本配置中没有，如果不加会导致下面报错webpack未定义
...

module.exports = {
    entry: { ... },
    output: { ... },
    resolve: { ... },
    module: { ... },
    ...
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery'
        })
    ]
};

然后就可以在Vue项目里和正常一样使用jQuery了。

我看你的代码报错，看起来你现在是用的Zepto。由于Zepto和jQuery的语法类似但是实现方法是有区别的，所以我建议你将Zepto换成jQuery按照上面的方法配置一下。

Answer 2

因为bootstrap依赖jquery 你需要使用vue（原生js）重写过的插件