vue中使用 bootstrap 和 jQuery_vue中bootstrap和分页组件-CSDN博客

本文详细介绍了如何在项目中安装并配置jQuery和Bootstrap，包括使用npm进行安装、在webpack配置文件中设置ProvidePlugin、在main.js中引入以及如何测试安装是否成功。

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

使用bootstrap需要在项目中先安装jQuery

安装jQuery：

1.npm install jquery --save-dev

安装参数 --save 与 --save-dev 区别在于--save-dev安装于开发环境中

2.在webpack.base.conf.js（如果是是开发[dev]环境则在webpack.dev.conf.js；两个文件都在bulid目录下；）中添加如下内容：

var webpack = require('webpack')

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

3. 在main.js中引入jQuery：

import 'jquery'

4.测试一下jQuery是否安装成功：

<script>

  $(function () {
  alert("hello")
 })

</script>

如下安装成功：

安装bootstrap：

1. npm install bootstrap --save-dev

2.npm install --save axios popper.js

3.main.js引入：

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

4.测试是否成功：

<button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

5.效果出现即成功：