在vue项目中引入bootstrap框架

基本介绍：

       都知道，bootstrap框架基于jQuery，因此，想使用bootstrap框架，就得先引入jQuery。

第一步，引入jQuery。
在项目的根目录下，使用命令：
npm install jquery -S
打开项目下的文件夹build中的webpack.base.conf.js文件，在文件开头添加以下代码：
var webpack = require('webpack')
然后在webpack.base.conf.js文件中，找到 module.exports={}，在其中插入以下代码：
plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ],
添加完成后的文件，如图：

然后在main.js中，引入jQuery
import $ from 'jquery'
然后就可以在helloworld.vue文件中验证jQuery是否安装好。

2 . 第二步，引入bootstrap框架：

在项目的根目录下，输入命令：
npm install bootstrap3 -S
在这里我选择bootstrap3版本的

然后在main.js文件中引入bootstrap

 

最后，你就可以愉快的使用bootstrap框架了！谢谢
————————————————
版权声明：本文为优快云博主「li_914」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_38945126/article/details/81510656