vue2.0+webpack 如何使用bootstrap?

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

clipboard.png

回答:

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

  • 通过npm安装bootstrapjquerynpm install bootstrap jquery --save

  • main.js里依次载入jQueryBootstrap,添加类似如下代码:

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.jsplugins配置块中,加入jQuery配置,整个webpack.base.conf.js文件看起来类似这样(部分无关代码已省略):

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

module.exports = {
    entry: { ... },
    output: { ... },
    resolve: { ... },
    module: { ... },
    ...
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery'
        })
    ],
    ...
};
  • 这样就可以在Vue项目中直接使用$()了。

回答:

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样式了

回答:

当然报错,直接引入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 相关的都可以逐步改造。

回答:

问题解决了吗?

回答:

引入一个jquery咯 boot基于jquery

回答:

bootstrap的插件需要基于jQuery,引入jQuery就好了。比如像我下图这样:
图片描述

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注