vue使用bootstrap

最新推荐文章于 2025-06-02 09:18:03 发布

原创最新推荐文章于 2025-06-02 09:18:03 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中整合Bootstrap。首先通过npm安装jquery，并在webpack配置文件中引入，接着在main.js中加载。然后安装bootstrap和popper.js，解决依赖问题。最后在webpack配置中添加Popper.js，并在项目中测试Bootstrap的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装jquery

npm install jquery –save-dev

打开build文件夹下的webpack.base.conf.js
头部添加代码：

const webpack = require("webpack");

module.exports 中添加代码

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],

在入口文件main.js中加入代码：

import $ from 'jquery' ;

测试：

<script>
  $(function () {
    alert()
  })
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

2、安装bootstrap

npm install –save-dev bootstrap

在入口文件main.js中加入代码：

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/js/bootstrap.min'

这时可能会报错

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                 14:43:35

This dependency was not found:

* popper.js in ./node_modules/_bootstrap@4.1.3@bootstrap/dist/js/bootstrap.min.js

To install it, you can run: npm install --save popper.js

因为bootstrap.js不仅依赖jquery还有popper.js，所以安装popper.js

cnpm install –save popper.js

同时在webpack.base.conf.js加入》》》Popper: [‘popper.js’, ‘default’],

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

测试加入bootstrap代码

   <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>