引用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. Vue中计算属性、侦听、过滤、自定义指令、ref的操作

    1.计算属性 <div id="app"> <input type="text" v-model="x"> < ...

  2. IP地址网段表示法

    172.12.34.0/25 子网掩码:用于表示IP地址中的多少位用来做主机号.因为"其中值为1的比特留给网络号和子网号,为0的比特留给主机号"(TCP/IP V1). 172.1 ...

  3. Dynamics CRM 2015/2016新特性之三十二:新增乐观并发处理

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复215或者20160328可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  4. Android Toolbar中的title居中问题

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/167 Android Toolbar中的title居中问题 ...

  5. Java实现图片按修改时间排序

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/127 图片按修改时间先后顺序排序 刚刚碰到了个小问题,处理 ...

  6. 4.智能快递柜(通信篇-SOCKET)

    1.智能快递柜(开篇) 2.智能快递柜(终端篇) 3.智能快递柜(通信篇-HTTP) 4.智能快递柜(通信篇-SOCKET) 5.智能快递柜(通信篇-Server程序) 6.智能快递柜(平台篇) 7. ...

  7. Microsoft.Extensions.DependencyInjection 阅读笔记

    一. 关于IServiceCollection接口的设计 public interface IServiceCollection : IList<ServiceDescriptor> { ...

  8. 记录Flex布局的属性

    容器属性 flex-dirextion(主轴的方向):>>row(水平) | row-reverse(水平取反) | column(垂直) | column-reverse(垂直取反) f ...

  9. linux系统管理-输入输出

    目录 linux系统管理-输入输出 参数传递xargs linux系统管理-输入输出 重定向 将原本要输出到屏幕上的数据信息,重新定向到指定的文件中 运行程序,或者输入一个命令:默认打开4个文件描述符 ...

  10. Spring Cloud Netflix Ribbon详细介绍及自定义规则策略

    之前文章我们介绍了如何配置具有Ribbon轮询机制的负载均衡策略的消费者,这次来具体了解一下Ribbon的一些细节,以及如何自定义负载均衡策略等. 说一下Ribbon实现负载均衡的大致思路.它通过用@ ...