vue-cli2中引入Bootstrap和jQuery

cdgogo

于 2020-08-20 15:41:11 发布

阅读量489

点赞数 1

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/cdgogo/article/details/108124724

版权

vue.js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何在Vue-cli2项目中引入jQuery和Bootstrap。首先，通过在webpack配置文件和main.js中添加相关代码来引入jQuery。接着，确保先安装jQuery，再安装Bootstrap，并在main.js中引入Bootstrap，使得项目能正常使用这两款库。

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

引入jQuery

1、引入jquery

npm install jquery --save-dev

2、在项目根目录下的build目录下找到 webpack.base.conf.js 文件，在开头使用以下代码:

const webpack = require('webpack')

然后在module.exports中添加一段代码：

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

在这里插入图片描述

在这里插入图片描述
3、在main.js中添加代码
import $ from 'jquery'

到此，jquery已经引入成功。可以在App.vue中添加测试代码：

$(function () {alert (123);});

在这里插入图片描述

引入Bootstrap

1、安装bootstrap前，必须先安装jQuery

2、安装bootstrap，使用命令

npm install bootstrap --save-dev

可以指定版本，不指定的话会安装最新的版本。

npm install bootstrap@3 --save-dev

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

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