在vue使用bootstrap的相关配置问题

最新推荐文章于 2025-02-27 11:48:41 发布

有一个王小森

最新推荐文章于 2025-02-27 11:48:41 发布

阅读量585

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue-cli 文章标签： vue+bootstrap

本文链接：https://blog.youkuaiyun.com/wangxiaoxiaosen/article/details/94733842

vue-cli 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Vue项目中使用Bootstrap的配置过程，首先需要安装jQuery，接着在webpack.base.conf.js中添加相应配置，最后在main.js中引入Bootstrap。

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

由于bootstrap是依赖于jquery的，所以在使用时应该先安装jquery。
安装

npm install jquery bootstrap@3 popper.js --save

然后应该在项目中配置一下内容：
在webpack.base.conf.js中：
添加:module.exports={ }中添加配置

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

const  webpack = require("webpack");

在

configureWebpack:{//configureWebpack是vue-cli配置webpack参数的入口。
    plugins: [
  //配置全局变量。$/jQuery/window.jQuery指向jquery  Popper指向默认的popper.js
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "window.jQuery":"jquery",
          Popper: ["popper.js", "default"]
      })
  ]},

然后就是在main.js中的引用。

//引用jquery，
import $ from "jquery";
require('bootstrap');//引用bootstrap，由于默认只是一用bootstrap的js文件，所以要引用css文件。
require('bootstrap/dist/css/bootstrap.css')

new Vue({
  el: '#app',
  router,
  $,
  components: { App },
  template: '<App/>'
})

到此结束。