How to use bootstrap in vue-cli project

This time I will show you how to use bootstrap in the vue-cli project, and 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.

Install plug-in

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

Configure webpack.base.conf.js

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

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

Add in main.js

import $ from 'jquery'
import 'bootstrap'

Test jquery

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

testbootstrap

<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 jquery layur pop-up layer in practical projects

How express mock operates front and backend parallelism Development

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!