vue-项目中引入jquery和bootstrap

一、安装jquery

由于bootstrap中js插件依赖于jquery，所以在这之前必须安装jquery。

1、在package.json中添加一行代码：“jquery”: “^2.2.3”

 

 

 

2、在build文件webpack.base.conf.js中添加代码：

头部插入代码：

const webpack = require("webpack")

中间插入代码：

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery",
      Popper: ['popper.js', 'default'],  //这一句是安装 bootstrap 和 bootstrap 的 popper.js 之后再添加进来
    })
  ],

效果展示：

 

 

 

3、在main.js中加入：import $ from 'jquery'

 

 

 

4、使用cmd进入对应存储路径安装jquery

我希望将hjquery文件安装在D:\Program Files路径下，因此我进入该路径下，运行npm install jquery@2.2.3 –save-dev。这时候jquery安装完成。

 

 

 

 5、jquery安装完成后，打开安装路径D:\Program Files，看到生成了3个文件。打开node_modules包含两个文件jquery和.package-lock.json。

  

 

 

 

二、安装BootStrap

1、cmd启动运行npm install bootstrap@3.3.0 –save-dev，安装BootStrap

 

 

 

2、在main.js页面引入

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

 

 

 

3、安装完成后，可以看到D:\Program Files\node_modules文件夹中生成了bootstrap文件夹。

 

 

 

三、启动项目

打开cmd，运行npm run dev启动项目