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


Posted in Javascript onApril 21, 2018

在一个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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
Js的Array数组对象详解
Feb 22 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
详解webpack模块化管理和打包工具
Apr 21 #Javascript
Node.Js生成比特币地址代码解析
Apr 21 #Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 #Javascript
JS装饰器函数用法总结
Apr 21 #Javascript
vue 之 .sync 修饰符示例详解
Apr 21 #Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 #Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 #Javascript
You might like
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
.net C#面试题
2012/08/28 面试题
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
医院后勤自我鉴定
2013/10/13 职场文书
模具专业推荐信
2013/10/30 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
MySQL常用慢查询分析工具详解
2022/08/14 MySQL