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

更新时间：2018年04月21日 09:45:46 作者：Chiu

本篇文章主要介绍了在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>

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

您可能感兴趣的文章:

一定要知道的 25 个 Vue 技巧
这篇文章主要给大家分享将 prop 限制为类型列表、默认内容和扩展点、使用引号观察嵌套值、知道何时使用 v-if、单作用域 slot 的简写、有条件地渲染slot等25 个Vue 技巧，下文是下相关资料,需要的朋友可以参考一下
2021-11-11
Vue多组件仓库开发与发布详解
这篇文章主要介绍了Vue多组件仓库开发与发布详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
vue日历/日程提醒/html5本地缓存功能
这篇文章主要介绍了vue日历/日程提醒/html5本地缓存功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
vue模式history下在iis中配置流程
这篇文章主要介绍了vue模式history下在iis中配置流程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
vue 公共列表选择组件,引用Vant-UI的样式方式
这篇文章主要介绍了vue 公共列表选择组件,引用Vant-UI的样式方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
antdv的table因数据量过大导致的卡顿问题及解决
这篇文章主要介绍了antdv的table因数据量过大导致的卡顿问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
Vue监听使用方法和过滤器实现
这篇文章主要介绍了Vue监听使用方法和过滤器实现，过滤器为页面中数据进行强化，具有局部过滤器和全局过滤器
2022-06-06
vue3封装el-pagination分页组件的完整代码
这篇文章主要介绍了vue3封装el-pagination分页组件的完整代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-02-02
vue框架下部署上线后刷新报404问题的解决方案(推荐)
这篇文章主要介绍了vue框架下部署上线后刷新报404问题解决方案,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
uniapp和vue的区别详解
这篇文章主要介绍了uniapp和vue的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-10-10