1. 程式人生 > >vue項目踩坑-引入bootstrap

vue項目踩坑-引入bootstrap

img var com 一個 web 繼續 ide mage 說明

1.下載jquery;

npm install jquery --save-dev

技術分享圖片

2.在webpack.base.conf.js中添加如下內容:

var webpack = require(‘webpack‘)

 // 增加一個plugins
plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
],

如圖:技術分享圖片

技術分享圖片

3.然後在main.js中添加內容

 import $ from ‘jquery‘

技術分享圖片

此時驗證jquery:

 技術分享圖片
如果彈出123 說明jquery用引入成功。

4.繼續引入bootstrap

npm install bootstrap --save-dev

安裝成功後,能夠在package.json文件夾中看到bootstrap這個模塊。

技術分享圖片

這時候需要在main.js中添加如下內容:

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

技術分享圖片

Bootstrap dropdown require Popper.js (https://popper.js.org)。

原因:
Bootstrap 的dropdown插件是依賴popper.js

# 解決:

npm install --save popper.js

在module.exports = {}中添加一下代碼

plugins: [
   new webpack.optimize.CommonsChunkPlugin(‘common‘),
   new webpack.ProvidePlugin({
     jQuery: ‘jquery‘,
     $: ‘jquery‘,
    Popper: [‘popper.js‘, ‘default‘],
   })

技術分享圖片

vue項目踩坑-引入bootstrap