webpack vue-cli項目中安裝bootstrap


因為bootstrap依賴jquery,所以在使用npm安裝bootstrap前先安裝jquery

又因為jquery以來popper.js,所以在安裝jquery之前先安裝popper

所以安裝過程分為三步:

一、使用npm安裝popper

二、使用npm安裝jquery

三、使用npm安裝boostrap 

 

一、使用npm安裝popper

1.在build目錄下的webpack.base.conf.js中加入

const webpack = require("webpack");

2.在webpack.base.conf.js中module.exports找到plugins(如沒有就創建),並添加上

Popper:['popper.js','default'],

3.使用npm安裝popper

命令:npm install popper.js --save-dev

二、使用npm安裝jquery

1.在package.json文件中找到"dependencies"項,並添加以下代碼到其中:

"jquery": "^2.2.3"

2.在build目錄下的webpack.base.conf.js中

在module.exports中找到resolve,在其alias項中添加:

'jquery':'jquery',

在module.exports中找到plugins,並添加以下代碼:

3.在main.js中加入以下代碼:

 

import $ from 'jquery'

4.使用npm命令安裝

npm install jquery@2 install jquery@2.2.3 --save-dev

三、安裝bootstrap

使用npm命令安裝

npm install bootstrap

 

大功告成,在需要的頁面導入bootstrap.min.css/bootstrap.min.js就可以了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM