在阅读本文之前，应该掌握了vue项目的搭建。命令执行请先切换到项目目录。
引入jquery
- 安装jquery（在package.json中查看是否安装，如果已安装可忽略此步骤）
$ npm install jquery --save-dev
const webpack = require('webpack')
在 module.exports = { 代码段里加入下面内容：
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
"windows.jQuery": "jquery"
})
]
import $ from 'jquery'
- 然后可以重新执行 npm run dev 后测试是否可用
引入bootstrap （方式一）
- 安装bootstrap
npm install bootstrap --save-dev
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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1irsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
