专栏首页Devops专栏66. Vue 结合webpack使用jquery以及boostrap

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">&times;</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

可以看到已经可以成功使用了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • GitBook - 插件安装 - 悬浮目录

    Devops海洋的渔夫
  • Django 2.1.7 模型 - MVT模型增删功能

    上一篇Django 2.1.7 模型类 - 字段类型讲述了关于模型字段类的内容,丰富了不少模型中的字段类型。

    Devops海洋的渔夫
  • jquery特殊效果 - fadeIn\fadeOut\hide\show\slide

    那么下一步写click监听点击按钮,然后触发div使用fadeOut()方法,使得已存在的div消失,如下:

    Devops海洋的渔夫
  • 前端之bootstrap模态框

      简介:模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。...

    互联网金融打杂
  • bootstrap的模态框

    ydymz
  • bootstrap 模态框 弹出框

    ('#identifier').modal('show') 显示 $('#identifier').modal('hide') 隐藏

    用户5760343
  • Bootstrap 模态框(Modal)插件的基本应用

    通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍,可以在不离开父窗体的情况下进行一些互动和内容的交互。

    德顺
  • Bootstrap模态框相关操作配置

    俗可耐
  • Java agent 与 byte buddy

    Java 中实现agent 中对类的修改 实际上是要实现instrument 包下的 ClassFileTransformer 接口并实现。

    猎户星座1
  • 图像融合之泊松融合(Possion Matting)

    一棹烟波

扫码关注云+社区

领取腾讯云代金券