vue-cli3引入bootstrap組件和icon插件

前置：引入jQuery
首先：npm install jquery --save-dev
然後在webpack.base.conf.js的module.exports中找到plugins，在裏面加入：

new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
 })

最後在main.js文件中 引入jquery：

import $ from 'jquery'

接下來是引入bootstrap：
使用命令npm install bootstrap --save-dev引入bootstrap。
安裝成功後，能夠在package.json文件夾中看到bootstrap這個模塊
這時候需要在main.js中添加如下內容：

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

注意：從bootstrap4.X開始，想使用bootstrap的icon等，就必須要單獨引用bootstrap-vue，首先額外引入vue add bootstrap-vue，然後在main.js裏面引入需要的插件，包括icon。

import { BootstrapVue,IconsPlugin} from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

然後就可以直接引入icon了。icon庫見地址。

<b-icon icon="tools"></b-icon>

此時可以在項目庫裏看到一個插件：

參考：https://www.jianshu.com/p/9e303b2abed4
官網安裝說明：https://bootstrap-vue.org/docs（點擊components還可以查看各個組件的使用）