vue3知识点5.33 vuecli3.0中和vuecli4.5中jquery和bootstrap的引入和使用（亲测有效）

vue3知识点5.33 vuecli3/4中jquery和bootstrap的引入和使用

前言：

vuecli4.5用法请直接拉到文章最后。

一定要是npm create xxx创建的项目，才管用。下面分享我做的一个可用的小例子。

我看了很多博客，我自己用了都报错。

报错1：Uncaught TypeError: Bootstrap’s JavaScript requires jQuery. jQuery must be …

提示bootstrap在jquery前面，要求jquery在前面引用，但是我的jquery就是在前面，没有引用错。

报错2：$ is not defined.

$无法全局使用，只能在使用的组件中添加，import $ from jquery,即使配置了vue.config.js也不行。

报错3：下载好了在执行启动命令的时候，提示：

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue3demo2@0.1.0 serve: vue-cli-service serve

…

报错3解决办法：

jquery和bootstrap引入方法

以下内容均在vue3demo3 helloworld.vue中。

1.安装jquery

安装jQuery
npm install --save jquery

2.安装bootstrap，popper.js 用于在 Bootstrap 中显示弹窗、提示、下拉菜单。

npm install --save popper.js
npm install bootstrap@4 --save

或者合起来安装这样写

npm install jquery bootstrap@4 popper.js --save

安装成功，在package.json,可以看到这样：

如果安错了想卸载：

直接把package.json下的dependencies下刚安的插件删除，重新安就行。

Vuecli3中：

在项目main.js中引入.

import $ from 'jquery'
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js"

有的时候这一步就会出错，告诉你jquery应该在bootstrap前面，这个时候我们把import $ from 'jquery’移到该用它的组件去。