引用bootstrap   yarn add bootstrap@3

基于jquery,因此还需要引用2个包,jquery和popper.js, yarn add jquery popper.js -S

引用完后在项目中创建一个配置文件(跟package.json同级),命名vue.config.js,将下面的代码复制进去。。。

const webpack = require('webpack')
module.exports = {
  chainWebpack: (config) => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
    $: 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
    }])
  },
  css: {
    sourceMap: true
  },
  devServer: {
    port: 8040
  }
}
 
然后在main.js引用下面两个文件
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
此时bootstrap样式已经引用到项目了。

vue引用bootstrap3的更多相关文章

  1. vue学习【一】vue引用封装echarts并展示多个echarts图表

    大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...

  2. vue 引用高德地图

    vue 引用地图之傻瓜式教程(复制粘贴即可用) npm 下载 npm install vue-amap --save main.js 代码 import AMap from 'vue-amap'; V ...

  3. vue引用公用的头部和尾部文件。

    我创建了一个header.vue和fotter.vue,用来做于网站的头部和尾部,每个页面都需要引用这两个,我以组件的方式,来引用这样只需要添加注册的组件就可以了. 第一步.在components文件 ...

  4. vue 引用其他组件

    1.在components 目录下新建Test.vue 文件 <template> <div class="test"> <h1>{{ msg ...

  5. vue引用外部JS的两种种方案

    前言 肯定会遇到没有npm化的库 自己写的js 方法 在Vue中该怎么引用呢 第一种 如果库是es6写的 就可以用import 引入 比如我自己写的http 封装接口的方法 就可以这样子导入哦 第二种 ...

  6. vue引用ionic4

    现在的Ionic4已经开始支持VUE和REACT了.个人之前开发用IONIC.现在用VUE开发还是想用IONIC.刚好 也是支持VUE了. 在vue的项目里安装ionic依赖 npm install ...

  7. vue 引用公共方法(例子:截取字符串固定字数,其余显示...)

    1.写公共js 2.main.js引入公共js 3.在组件中用this.common.方法名 引用

  8. Vue引用其他组件,但组件某些部分不需要时的简单处理

    项目开发时,我们会把多个地方重复使用的模块抽象成组件,提供给大家一起使用,但是使用组件的时候偶尔会遇见一些问题,比如说组件里只有某些东西自己并不需要,这个时候我们可以对组件进行简单的修改,而不影响其他 ...

  9. Vue引用第三方datepicker插件无法监听datepicker输入框的值

    一.背景 在Vue项目中使用了第三方的datepicker插件,在选择日期后vue无法检测到datepicker输入框的变化 <label class="fl">日期: ...

随机推荐

  1. 315道Python常见面试题

    第一部分,Python基础篇 为什么学习Python? 通过什么途径学习的Python? Python和Java.PHP.C.C#.C++等其他语言的对比? 简述解释型和编译型编程语言? Python ...

  2. 高强度学习训练第八天总结:MySQL的一些优化

    为什么要做MYSQL优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库中的数据会越来越多,处理时间会相应变慢. 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计 ...

  3. MySQL基于报错注入1

    0x1 判断注入点: http://www.xxxx.ro/s.php?id=1' 那么尝试闭合下单引号 http://www.xxxx.ro/s.php?id=1' --+ 0x2 枚举下表的列 h ...

  4. 告诉你如何在Xcode中安装炫酷的插件!!!!!

    (如果你已经有了自己喜欢的插件,你可以直接找到该插件的下载地址,下载下来,参照下面的步骤来安装到Xcode工程之中) 如果还没有找到自己想要的插件,那么推荐你在开源中国社区http://www.osc ...

  5. Java数据结构(一):栈

    导言:栈和我们的现实当中的箱子是一样的,保持一个先进后出,后进先出的原则.比如我们往一个箱子堆积衣服,一件一件地放进去之后,过一段时间再回来拿.那么最先放进去的衣服肯定最后拿出来,最后放进去的衣服就会 ...

  6. JDK10源码分析之HashMap

    HashMap在工作中大量使用,但是具体原理和实现是如何的呢?技术细节是什么?带着很多疑问,我们来看下JDK10源码吧. 1.数据结构 采用Node<K,V>[]数组,其中,Node< ...

  7. 【cf343】D. Water Tree(dfs序+线段树)

    传送门 题意: 给出一个以\(1\)为根的有根树,起始每个结点都为\(0\),现在有三种操作: 1.将\(v\)及\(v\)的子树都置为\(1\): 2.将\(v\)及其所有的祖先都置为\(0\): ...

  8. 【转】阿里云部署java web项目

    主要步骤:1. 购买阿里云服务器2. 远程连接3. 在云服务器上配javaweb环境:jdk,tomcat,MySQL4. 将项目的war文件放到Tomcat下关于云服务器ECS:如果还想在买服务器之 ...

  9. luoguP4103 [HEOI2014]大工程

    题意 建出虚树DP. 设\(f[i]\)表示i的子树的第一问答案,\(minn[i]\)表示\(i\)的子树中到\(i\)最近的关键点,\(maxx[i]\)表示\(i\)的子树中到i距离最远的关键点 ...

  10. boostrap --- 弹窗modal的使用

    <input id="btntext" type="button" value="添加文本组件" data-toggle=" ...