如何在vuejs中使用bootstrap？

Question

使用vuejs重构代码，原来的代码是使用bootstrap+jquery开发的。
不想重复的去写样式，所以想把原来的东西直接拿过来。但是再引入bootstrap的时候遇到了问题。

<script>
import jquery from '../../node_modules/jquery/dist/jquery.min.js'
import bootstrap from 'bootstrap'
export default {

}
</script>

在import进来的时候报错，

还有css用的less，如何同时引入bootstrap的css文件呢？

Answer 1

使用bootstrap 还是 使用bootstrap css

bootstrap分为css和js两个文件，其中css负责样式，js给按钮等组件填上响应事件。
所以光使用css只有一些基础样式。
那为什么不加载js呢？直接原因是其依赖于jquery。而在使用了vue作为数据绑定的情况下，jquery做的事情，vue都做得了，没必要引入jquery。引入jquery引起两套数据->UI控制，不太好。

不用jquery怎么使用bootstrap的高级功能

@limichange 提到的 http://yuche.github.io/vue-strap/
这是一个yuche大哥做的bootstrap封装。其原理是引入bootstrap的css，然后做了许多vue组件，通过class通知样式。风格跟bootstrap比较统一。
我们公司使用这个库做的前端ui。
不过平心而论，这个库的更新能力比较弱，作者比较不干事。有些bug和功能都没有得到完成。

除了vue-strap还有许多新的库能用呢！
在这里https://github.com/vuejs/awesome-vue
找找

比如vux https://github.com/airyland/vux
是基于微信weui的组件库
比如http://morgul.github.io/vueboot/ 什么的。

好像awesome-vue里还有其他基于bootstrap样式的vue组件库。

css or less

其实less是一门css的预编译语言。（此定义未必准确）
缘起是这样的：

1. 一个页面不宜加载太多的文件。这是因为每一个文件都得让浏览器去做http请求，下载，执行。下载1000个1k的文件跟下载1个1000k的文件比起来，通常耗时前者会比后者多1~2个数量级。

2. 针对编程这件事而言，大规模项目总有模块化倾向。这是分治的原因，把大问题化成小问题，方便开发和重用。

3. 所以我们需要一个工具，可以把大量碎片的css合成成一个css。同时，css在设计之初是面向ui的，编程能力太弱了，需要一个更强有力的语言。

4. less是bootstrap3所采用的预编译器，此外还有bootstrap4采用的sass，和一个叫stylus的编译器（和语言）。less、sass、stylus都差不了太多。自行了解吧。

5. 对于一个使用了webpack + vue的项目来说，如果不需要对bootstrap的总体样式进行调整，直接采用一个外链css就可以了，简单方便，本地node_modules中都不需要下载bootstrap。如果有样式调整，甚至更深入的开发，才有必要引入其使用的less。

Answer 2

我是这么做的：

webpack.config.js

var webpack = require('webpack');

module.exports = {
    // ...
    entry: {
        // ...
        vendor: [
            'jquery',
            'tether',
            'bootstrap/dist/js/bootstrap.min.js'
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            'window.Tether': 'tether'
        }),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity)
    ]
}

index.html 适当位置加入

<script type="text/javascript" src="path/to/vendor.bundle.js"></script>

刚从这个坑里爬出来，希望对你有帮助

Answer 3

你应该用这个的http://yuche.github.io/vue-strap/。已经有人封装好了。

Answer 4

import jQuery from 'jquery';

Answer 5

vux目前用着不错，核心团队很给力，我们从0.*一直跟上来。现在尝试vue+bootstrap，推荐https://bootstrap-vue.js.org/

Answer 6

Vue生态目前已经有专门针对Vue整合Bootstrap的插件库，叫bootstrap-vue.js，不需要依赖Jquery就可以完成整合，官方地址：https://bootstrap-vue.js.org/

Vue工程中导入该插件后，就可以愉快的使用bootstrap4了，用法和原来差不多，只不过在class类前，多加个b-前缀