原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666
个人Vue项目需要使用bootstrap，实践过程记录下来留作参考：
背景：
1，有一个Vue项目模板，如果没有可以参考我前面的文章：《新建一个vue空白项目并上传到github上》；
网址：https://www.jianshu.com/p/dcc06a19a9a6
2，如果懒得重新配置可以直接去git上clone我的项目代码参考，项目地址如下：
方法一项目git地址：https://github.com/tom-wong666/model.git
方法二项目git地址：https://github.com/tom-wong666/xiaoa.git
git项目clone方法，见此文背景第1步的文章中，第二部分第5步至第8步。
方法一，简单粗暴直接index.html引用
见下图序号，并参考如下文字说明操作:
1，static文件中新建bootstrap文件夹，放入图中的三个文件：boot两个，jquery一个(boot依赖jquery)；
备注1：boot官网文件下载地址https://v3.bootcss.com/getting-started/#download
备注2：jQuer官网文件下载地址https://jquery.com/download/
2，打开index.html;
3，引入boot的css文件；
4，引入jquery的js文件；
5，引入boot的js文件；
6，以上配置完成，直接在vue组件中使用boot。
注意：js文件引入顺序不能错，先引入jquery再引入boot；
方法一项目git地址：<u>https://github.com/tom-wong666/model.git</u>
方法二，npm安装jQuery和boot
由于boot依赖jQuery，所以第一步安装jQuery：
1、在package.json的dependencies中添加一行代码：“jquery”: “^2.2.3”：
"dependencies": {
"bootstrap": "^3.3.0",
"jquery": "^2.2.3",//这是需要加的内容
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
2、在build文件webpack.base.conf.js中添加两行代码：
//......表示省略已有的
module.exports = {
.....................
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': 'jquery' //这里是增加的
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"//这里是增加的
})
],
.....................
}
3、在main.js中加入如下代码：
import $ from ‘jquery’ ；
4、在命令行工具中运行如下命令完成jQuery安装；：
npm install jquery@2.2.3 –save-dev
5，jQuery安装完成后下一步，在命令行工具中运行如下命令安装boot：
npm install bootstrap@3.3.0 –save-dev
6，在需要的vue组件中引入如下代码，就可以使用了：
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
</script>
