在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 相关文章推荐
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
用JS写一个发布订阅模式
Nov 07 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传输数据的代码
2007/11/13 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
ThinkPHP模型详解
2015/07/27 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python ---lambda匿名函数介绍
2019/03/13 Python
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
初中历史教学反思
2016/02/19 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
Python采集壁纸并实现炫轮播
2022/04/30 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL