vue 集成bootstrap

vue 集成bootstrap

第一步、npm安装

安装命令如下：

yarn add [email protected]
yarn add jquery
yarn add popper.js

第二步、vue中引入bootstrap

在 mian.js 页面，写以下代码

// 引入jQuery、bootstrap

import $ from 'jquery'

import 'bootstrap'

 

// 引入bootstrap样式

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min.js'

 

// 全局注册 $

Vue.prototype.$ = $

第三步、配置 jQuery组件

在 vue.config.js 中，写如下代码（如果没有 vue.config.js ，则在 package.json 同级目录下手动新建）

const webpack = require("webpack")

module.exports = {

    // 配置插件参数

    configureWebpack: {

        plugins: [

            // 配置 jQuery 插件的参数

            new webpack.ProvidePlugin({

                $: 'jquery',

                jQuery: 'jquery',

                'window.jQuery': 'jquery',

                Popper: ['popper.js', 'default']

            })

        ]

    }

}

第四步 测试