手机查看
【vue】vue中使用jquery和bootstrap
vue中使用jquery和bootstrap
在阅读本文之前，应该掌握了vue项目的搭建。命令执行请先切换到项目目录。
引入jquery
- 安装jquery（在package.json中查看是否安装，如果已安装可忽略此步骤）
$ npm install jquery --save-dev
- 在 build/webpack.base.conf.js 中添加如下内容：
const webpack = require('webpack')
在 module.exports = { 代码段里加入下面内容：
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
"windows.jQuery": "jquery"
})
]
- 在main.js中添加内容
import $ from 'jquery'
- 然后可以重新执行 npm run dev 后测试是否可用
引入bootstrap （方式一）
- 安装bootstrap
npm install bootstrap --save-dev
- 安装成功后，能够在package.json文件夹中看到bootstrap这个模块。
这时候需要在main.js中添加如下内容：
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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>
head>------ 本文结束 感谢阅读 ------
上一篇：
网页右键禁用和禁止复制
下一篇：
解决苹果手机上点击事件无效