vue2项目中使用 bootstrap

vue2项目中使用 bootstrap

1.安装相关依赖

这里我使用的是bootstrap 3，默认安装最新版

#使用cnpm或者yarn也行
npm i bootstrap@3 -S
npm i jquery -S
npm i popper.js -S

2.注册

在main.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.$ = $

3.配置vue.config.js

如果没有vue.config.js这个文件，请在项目根目录下手动创建。

const webpack = require("webpack");

module.exports = {
  // 配置插件参数

  configureWebpack: {
    plugins: [
      // 配置 jQuery 插件的参数

      new webpack.ProvidePlugin({
        $: "jquery",

        jQuery: "jquery",

        "window.jQuery": "jquery",

        Popper: ["popper.js", "default"],
      }),
    ],
  },
};

4.使用

我在App.vue中演示一下

<template>
  <div id="app">
    <div class="container">
      <button type="button" class="btn btn-primary">测试按钮</button>
    </div>
  </div>
</template>

好了，这就搞定了，接下来就是根据需求使用了。