Introduction to the method of introducing bootstrap in Vue cli3

This article introduces the method of introducing bootstrap in Vue cli3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related recommendations: "vue.js tutorial", "bootstrap tutorial"

in vue project To introduce bootstrap, you must first introduce two dependencies: jQuery and popper

The first step, installation

1, npm installation

The installation command is as follows:

cnpm install bootstrap --save-dev
cnpm install jquery --save-dev
cnpm install popper.js --save-dev

The latest version is installed by default. If you want to install the V3 version of bootstrap (depends on less), you can:

cnpm install bootstrap@3 --save-dev

Or, use visual window installation

2, visual window installation

1. Find: Project > Dependencies > Install Dependencies > Run Dependencies
Search and install jquery and popper.js

2. Find: Project > Dependencies > Install Dependencies > Development Depend on
Search and install bootstrap

The second step is to introduce

In the main.js page, write the following code

// 引入jQuery、bootstrap
import $ from 'jquery'
import 'bootstrap'

// 引入bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

// 全局注册 $
Vue.prototype.$ = $

The third step is to configure jQuery

In vue.config.js, write the following code (if there is no vue.config.js, create it manually in the directory of the same level as package.json)

const webpack = require("webpack")
module.exports = {
    // 配置插件参数
    configureWebpack: {
        plugins: [
            // 配置 jQuery 插件的参数
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
            })
        ]
    }
}

Then, you can use it

Test bootstrap

<template>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <button class="btn btn-primary">测试按钮</button>
    </div>
  </div>
</div>
</template>

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of Introduction to the method of introducing bootstrap in Vue cli3. For more information, please follow other related articles on the PHP Chinese website!