如何在vue里引入Bootstrap

bootstrap依赖于jquery,因此使用时要下载jquery

 

cnpm install jquery --save-dev ，这样就可以安装jquery

 

然后修改webpack.base.conf.js(在build文件下)两个地方：

1：加入

?

1	var webpack = require('webpack')

2 在module.exports的里面加入

?

1 2 3 4 5 6 7

plugins: [    new webpack.optimize.CommonsChunkPlugin('common.js'),    new webpack.ProvidePlugin({      jQuery: "jquery",      $: "jquery"    })   ]

最后在main.js中加入import $ form 'jquery',完成jquery的引入

 

二、引入 bootstrap.css文件：

修改webpack.base.conf.js

?

1 2 3 4 5 6 7 8

resolve: {     extensions: ['.js', '.vue', '.json'],     alias: {       'vue$': 'vue/dist/vue.esm.js',       '@': resolve('src'),       'bootstrap':resolve('src/common/bootstrap-3.3.7-dist')     }   }

在main.js中import引入

?

1	import 'bootstrap/css/bootstrap.min.css' import 'bootstrap/js/bootstrap.min.js'

 

注意：修改了webpack.base.conf.js里面的内容，一定要重新npm run dev