Vue-cli3 引入bootstrap4.x 和jquery方法（有效）

---

前提声明

此篇文章，写于 2019年7月26日，使用的 vue-cli3.x bootstrap jquery ,是目前的最新版本，对于以前和以后新老版本的引入，仅作参考。
注：此使用vue的项目是通过 vue-cli 提供的图形化工具构建,打开方式——在命令提示符中输入

2019.12.25 修改：注意现在要一次性将三个依赖安装完之后再测试，单独安装可能会报错

   vue ui  

---

注意事项

1. 因为bootstrap的js是基于jquery上的所以我们要先安装jquery
2. bootstrap4.x的安装 总共需要安装三个依赖环境 jquery、bootstrap、popper。
   注：其中popper.js文件的安装是最容易忽视的（bootstrap3是没有这个文件的），如果不安装会报错误

   This dependency was not found: * popper.js in ./src/assets/libs/bootstrap/js/bootstrap.min.js
   

---

具体操作

• 安装jquery

1. 运行 vue ui 点击项目管理 左上角是要管理的项目
2. 此时 使用编译器打开 刚刚这个项目 （我用的是 VScode）package.json 有红框内容说明安装成功
   
3. 进入 src 目录下的 main,js

/* eslint-disable no-unused-vars */
import $ from 'jquery'	//在import下面添加 后即可

我们可以试着改变一下 app 里面的color

$('#app').css('color', 'red')

4. 返回vue ui 运行测试
   如果显示 为红字则说明jquery安装成功

• 安装bootstrap

5. 前面的步骤和 jquery是一样的，只是要安装两种 bootstrap和popper.js都默认是 运行依赖
6. 打开 package.json 是否存在红框内容.
   
7. 最后进入 src的 main.js 和jquery一样插入代码 即可

import "bootstrap/dist/css/bootstrap.css"
import "bootstrap/dist/js/bootstrap.min.js"

8. 在app.vue 里添加 bootstrap的 input样式作为测试
   
   出现了 bootstrap的输入框 成功！！！

---

吐槽

由于是自己学习，导入这两个文件的方式就卡了我一整天，期间各种百度博客都看了，最后到了第二天上午，在一篇博客中无意中看到，然后就解决了。可能这种配置问题有人帮忙的话10分钟就解决了，但是这次确确实实恶心到了自己，也算是锻炼了自己。