vue-项目中引入iquery和bootstrap

一、安装jquery

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

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

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

头部插入代码：

const webpack = require("webpack")

中间插入代码：

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

效果展示：

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启动项目

原文地址：https://www.cnblogs.com/AnnLing/p/15163102.html