66. Vue 结合webpack使用jquery以及boostrap
时间:2022-07-24
本文章向大家介绍66. Vue 结合webpack使用jquery以及boostrap,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求
有时候在 Vue 框架开发的时候,还是存在需要使用 jquery 以及 boostrap 的场景的,这个时候就需要安装 Jquery 以及 boostrap 了。
安装 jquery 以及 popper
使用 npm 安装 jquery
cnpm i jquery --save
或者
cnpm i jquery -S
使用 npm 安装 popper
cnpm install popper.js@^1.16.1 --save
# 这个版本号其实是在安装 cnpm install bootstrap --save 之后就会提醒要安装哪个版本的依赖。
webpack.config.js 中配置导入 jquery 以及 popper
image-20200825143157287
// webpack插件
const webpack=require('webpack');
module.exports = {
...
plugins: [ // 配置插件的节点
..
new webpack.ProvidePlugin({ // 配置jquery
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery", // 添加plugins
Popper: ['popper.js', 'default'], // 添加Popper
}),
],
}
安装 Bootstrap4
使用 npm 安装 boostrap
cnpm install bootstrap --save
在 main.js 导入 boostrap
// 导入Boostrap
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
image-20200825143244682
在组件中尝试使用一个 modal
image-20200825143324607
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<button class="btn btn-success" @click="openModal">
通过js打开
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- 增加类modal-dialog-centered 就可以设置模态窗口垂直居中-->
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">信息</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
请确认是否删除!
</div>
<div class="modal-footer">
<!--自定义按钮的id进行监听即可-->
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="modal-btn-close">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="modal-btn-save" >确认删除</button>
</div>
</div>
</div>
</div>
image-20200825143411046
openModal(){
$('#exampleModal').modal('show');
}
页面效果如下:
image-20200825143447946
可以看到已经可以成功使用了。
- 前20名Python机器学习开源项目
- 接口测试 | 24 requests + unittest集成你的接口测试
- [快学Python3]数据结构与算法-二分查找
- 基于Excel参数化你的Selenium2测试
- 【LeetCode】关关刷题日记24-Leetcode 121. Best Time to Buy and Sell Stock
- 线性表的链式存储结构的实现及其应用(C/C++实现)
- [接口测试 - 基础篇] 01 你应该了解的协议基础
- 使用TensorFlow实现神经网络的介绍
- HTTP协议报文结构及抓包报文分析示例
- 必备 .NET - C# 异常处理
- Java Socket获取本机的InetAddress实例
- 机器理解大数据秘密:聚类算法深度剖析
- BZOJ 3668: [Noi2014]起床困难综合症【贪心】
- 用C#实现字符串相似度算法(编辑距离算法 Levenshtein Distance)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 教你用Python自动发送和收取邮件的方法
- Python爬虫 爬取糗事百科段子实例分享
- 用Python做一个游戏辅助脚本,完整编程思路分享!
- python获取百度热榜链接的实例方法
- 多图+代码 | 详解Python操作Excel神器openpyxl的各种操作!
- 为了给女朋友独特的七夕惊喜,我学会了人像美肤算法!
- Docker入门笔记总结
- AWVS13破解版安装
- Sqlmap注入使用技巧总结
- Lyft 宣布开源基础设施工具管理平台 Clutch!
- 从库mysqldump会导致复制中断
- DBA的福音,SQL审核利器-goinception
- 前端组件设计原则
- 分析网页 JavaScript Bundles 的几种方法
- 使用 DevTools 新增的 Issues 选项卡发现网页问题