完整成功版vue-cli引入jquery bootstrap popper.js

標籤：檔案   pop   imp   default   tst   css   optimize   檔案夾   npm   

第一步：在專案檔夾中

1，用npm或者cnpm安裝 jquery bootstrap popper.js

例如：cnpm i jquery -S (注意是大S 才能儲存在package.json檔案中)

2，注意觀察package.json檔案裡 要有類似這三項

"bootstrap": "^4.1.3", "jquery": "^3.3.1", "popper.js": "^1.14.4",

第二步：

在build檔案夾下webpack.base.conf.js檔案中修改配置：

1，添加：         const webpack = require(‘webpack‘);

2，在module.exports裡面添加plugins

module.exports = {plugins: [new webpack.optimize.CommonsChunkPlugin(‘common‘),new webpack.ProvidePlugin({$: ‘jquery‘,jQuery: ‘jquery‘,Popper: [‘popper.js‘, ‘default‘]})], 第三步：在main.js中引入如下檔案 import $ from ‘jquery‘ import ‘bootstrap/dist/css/bootstrap.min.css‘ import ‘bootstrap/dist/js/bootstrap.min‘  接下來就可以使用bootstrap的class樣式名了

完整成功版vue-cli引入jquery bootstrap popper.js