How to introduce bootstrap in vue project

vue Introducing bootstrap into the project? The following article will introduce it to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related tutorial recommendations: "bootstrap tutorial"

Introducing bootstrap into the vue project, 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 bootstrap V3 version (less dependencies), you can:

cnpm install bootstrap@3 --save-dev

Or, use the 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 dependencies
Search and install bootstrap

Second step, introduction

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, 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>
<p class="container">
  <p class="row">
    <p class="col-md-6">
      <button class="btn btn-primary">测试按钮</button>
    </p>
  </p>
</p>
</template>

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

The above is the detailed content of How to introduce bootstrap in vue project. For more information, please follow other related articles on the PHP Chinese website!