How to use bootstrap in vue-cli project

This time I will show you how to use bootstrap in the vue-cli project. What are the precautions for using bootstrap in the vue-cli project. The following is a practical case. Let’s take a look.

It is very convenient to add bootstrap to an html page. You just need to pass the css and js files through the Link and Script tags.

So how to add it to a front-end project generated with vue-vli? Because the framework is different, it takes some getting used to.

InstallationPlug-in

npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

Configuration webpack.base.conf.js

//在顶部添加
const webpack = require('webpack')

//在module.exports = {}末尾添加下面代码
module.exports = {
...
plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })
 ]
}

Add

import $ from 'jquery'
import 'bootstrap'

Test jquery to main.js

//在vue文件中添加测试代码
<script>
$(function () {
 alert('234')
})
export default {
 name: 'App'
}
</script>

Testing bootstrap

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use vue.js and element-ui to implement the menu tree structure

How to use vue Inner .sync modifier

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