【vue】vue中使用jquery和bootstrap

最新推荐文章于 2025-06-24 14:25:18 发布

lovenliu

最新推荐文章于 2025-06-24 14:25:18 发布

阅读量889

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/lypeng_/article/details/98168492

vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中引入并配置jQuery和Bootstrap，包括通过npm安装依赖、在webpack配置文件中进行设置以及解决可能出现的popper.js缺失问题。

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

在阅读本文之前，应该掌握了vue项目的搭建。命令执行请先切换到项目目录。

引入jquery

安装jquery（在package.json中查看是否安装，如果已安装可忽略此步骤）

$ npm install jquery --save-dev

在 build/webpack.base.conf.js 中添加如下内容：

const webpack = require('webpack')

在 module.exports = { 代码段里加入下面内容：

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

在main.js中添加内容

import $ from 'jquery'

然后可以重新执行 npm run dev 后测试是否可用

引入bootstrap （方式一）

安装bootstrap

npm install bootstrap --save-dev

安装成功后，能够在package.json文件夹中看到bootstrap这个模块。
这时候需要在main.js中添加如下内容：

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

重新运行如果报一下错误：

Module not found: Error: Can't resolve 'popper.js' ....

这是因为使用webpack打包bootstrap4的时候，需要手动安装popper.js

npm install popper.js -D

然后重新运行即可

引入bootstrap （方式二）

可以把bootstrap下载下来放入静态文件夹，或者使用 BootCDN 提供的免费 CDN 加速服务直接在index.html中引入bootstrap

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>