首页 > 其他 > 详细

vue项目踩坑-引入bootstrap

时间:2019-02-21 18:59:56      阅读:175      评论:0      收藏:0      [点我收藏+]

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

原文:https://www.cnblogs.com/lshdashi/p/10414330.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!