vue项目踩坑-引入bootstrap

发布时间：2020-12-17 20:45:14 所属栏目：安全来源：网络整理

导读：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.

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‘],})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!