vue2.0+webpack 如何使用bootstrap？

Question

vue2.0的项目里如何引用bootstrap？我想引用它的一些样式和icon。在vue2.0按正常引用插件的方法引用bootstrap会报错。

Answer 1

可以参照我在这个SegmentFault问题中的回答，这里再写一下吧。

• 通过npm安装bootstrap和jquery：npm install bootstrap jquery --save

• 在main.js里依次载入jQuery和Bootstrap，添加类似如下代码：

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

此处使用未压缩的版本也是可以的，另外上面的CSS和JS都可以酌情使用，Bootstrap的JS引入之前必须先引入jQuery。此外，上面的.js扩展名是可以省略的。

• 接着，打开build\webpack.base.conf.js打包配置，在头部加入var webpack = require('webpack')，接下来添加的配置中因为使用了webpack模块，如果不写这个会报错webpack未定义

• 然后在build\webpack.base.conf.js的plugins配置块中，加入jQuery配置，整个webpack.base.conf.js文件看起来类似这样（部分无关代码已省略）：

...
var webpack = require('webpack');
...

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

• 这样就可以在Vue项目中直接使用$()了。

Answer 2

1.引入jquery
在webpack.config.js中配置如下：

var webpack = require('webpack')

再加上下面的：

plugins : [
    new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
}),

]

1. 在页面中引入jquery
   import $ from 'expose?$!jquery'
   这个时候应该不会报你说的那个错误了

2. 安装bootstrap及必要的包
   具体见http://www.myexception.cn/web...

如果报错，说缺什么module就安装对应的module就好了，然后在页面中就可以使用bootstrap样式了

Answer 3

当然报错，直接引入css吧

如果要用到 navbar，还需要考虑手机屏上切换导航下拉菜单的问题，可以添加一个 Vue 实例数据 collapse，然后，按下面这种方式响应点击事件：

找到navbar-toggle，绑定 click 事件：

<button type="button" class="navbar-toggle collapsed" @click="navbarCollapsed = !navbarCollapsed">

找到navbar-collapse，添加 class 绑定：

<div class="navbar-collapse" :class="navbarCollapsed ? 'collapse' : 'collapsed'">

其他一些 bootstrap 中与 js 相关的都可以逐步改造。

Answer 4

问题解决了吗？

Answer 5

引入一个jquery咯 boot基于jquery

Answer 6

bootstrap的插件需要基于jQuery，引入jQuery就好了。比如像我下图这样：