在vue-cli项目中使用bootstrap的方法示例


            在一个html页面中加入bootstrap是很方便，就是一般的将css和js文件通过Link和Script标签就行。



那么在一个用vue-vli生成的前端项目中如何加入？因为框架不一样了，略微要适应一下。

安装插件







npm install jquery --save

npm install bootstrap --save

npm install popper.js --save



配置webpack.base.conf.js







//在顶部添加

const webpack = require('webpack')









//在module.exports = {}末尾添加下面代码



module.exports = {

...

plugins: [

  new webpack.ProvidePlugin({

   $: "jquery",

   jQuery: "jquery"

  })

 ]

}







main.js中添加







import $ from 'jquery'

import 'bootstrap'





测试jquery







//在vue文件中添加测试代码



<script>

$(function () {

 alert('234')

})



export default {

 name: 'App'

}

</script>







测试bootstrap







<template>

<div class="container">

  <div class="row">

    <div class="col-md-6">

      <button class="btn btn-primary">测试按钮</button>

    </div>

  </div>

</div>

</template>





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。