基于vue cli2共用bootstrap与Element栅格布局

最新推荐文章于 2024-09-12 10:03:29 发布

我是大大怪将军

最新推荐文章于 2024-09-12 10:03:29 发布

阅读量1.3k

点赞数

文章标签： vue.js bootstrap 前端 javascript 前端框架

本文链接：https://blog.csdn.net/qq_45739262/article/details/122250623

版权

本文介绍了如何在Vue CLI2项目中结合Element UI和Bootstrap实现响应式布局。首先通过npm安装jQuery和Bootstrap，然后在webpack配置及main.js中引入。接着在Element UI基础上添加Bootstrap的代码段，以增强响应式设计，实现了页面在不同尺寸下展示的良好效果。

摘要由CSDN通过智能技术生成

最近课设要求搞博客系统，拓展点之一就是使用响应式布局，因为我最开始是使用element UI作为工具，但是在响应式布局这一方面element ui不是很完善，主要还是以管理页面布局为主，所以就想到了可以使用bootstrap来拓展。

一、首先导入bootstrap：

注：在导入bootstrap之前要先导入jQuery。

终端导入jQuery：npm install jquery –save-dev

然后再build文件夹下的webpack.base.conf.js

配置

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery",
      Popper: ['popper.js', 'default']
    })
   ],