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

// 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'

在組件中嘗試使用一個 modal

        <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>

           openModal(){
                $('#exampleModal').modal('show');
            }

頁面效果如下：

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

更多精彩原創Devops文章，快來關注我的公衆號：【Devops社羣】 吧：