1. 程式人生 > >如何在vue-cli使用bootstrap框架

如何在vue-cli使用bootstrap框架

      一般來說,如果你只使用bootstrap框架的樣式,就直接把js那個資料夾刪掉,再把它們放進一個資料夾下,如src/assets,當然你也可以自己建立一個放置共用東西的資料夾。

然後在src/main.js裡面把它import進去就行了,如:import './assets/bootstrap/css/bootstrap.min.css'。這是最簡單的解決方案了。

      但是你要使用裡面的一些特效,就會使用JS。bootstrap框架的js來源於jq框架,所以你還得安裝支援jq語法的依賴,在命令列輸入(c)npm install JQuery --save-dev,推薦使用cnpm國內淘寶映象,下載速度快,不要翻牆。當然你也可以直接寫進package.json,直接npm install。然後在bulid檔案下找到webpack.base.conf.js。在上面加var webpack = require('webpack')。在下面的module.exports裡面加入:  

plugins: [ 
 new webpack.ProvidePlugin({ 
  $:"jquery", 
  jQuery:"jquery", 
  "windows.jQuery":"jquery"
 }) 
]

然後在main.js裡面import進來就行了,如import $ from 'jquery'。如果是區域性安裝的直接用相對路徑。

如果有使用eslint語法檢測,找到eslintigore資料夾,把bootstrap裡的JS資料夾忽略掉。