vue处理bootstrap

vue处理bootstrap

bootstrap依赖全局$需要声明全局的,webpack默认将$作为局部的

webpack.config.js中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const webpack = require('webpack');
// 处理.eot .woff2 .woff后缀的文件
test: /\.(jpg|ttf|svg|png|gif|eot|woff2|woff)$/,
loader: 'url-loader?limit=4096'
plugins: [
// 声明全局对象的插件
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],

main.js中引入bootstrap

1
2
3
import bootstrap from 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap-theme.css'