引用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. 如何使用npm的部分用法以及npm被墙的解决方法

    我们要明白我们使用的npm就是node中自带的包(模块)管理工具:借助NPM可以帮助我们快速安和管理依赖包,使Node与第三方模块之间形成了一个良好的生态系统. 我们可以直接输入npm,查看帮助引导: ...

  2. centos 7 搭建Samba

    一.Samba简介 Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,由客户端和服务端构成. SMB(Server Message Block的缩写,即服务器消息块)主要是作 ...

  3. indexOf()字符位置

    package seday01; /** * int indexOf(String str) * 查找给定字符串在当前字符串中的位置,若返回值为-1,则 * 表示当前字符串中不含有给定的内容. * @ ...

  4. HTML常用标签四

    表单 表单的组成 一个完整的表单通常由表单域.表单控件(也称表单元素)和提示信息3各部分组成 表单域 表单域是一个包含表单元素的区域 在HTML中,<form> 标签用去定义表单域,以实现 ...

  5. linux守护进程start-stop-daemon启动服务

    start-stop-daemon #! /bin/sh PATH=/sbin:/bin . /lib/lsb/init-functions do_start () { log_action_msg ...

  6. 配置oracle的ssl连接

    配置oracle的ssl连接   网上也没有中文资料,我硬着头皮看官方文档肯完,终于配置成功,下面是我配置步骤 配置安全套接层连接oracle 目录 1.        配置简介        1 2 ...

  7. Event事件、进程池与线程池、协程

    目录 Event事件 进程池与线程池 多线程爬取梨视频 协程 协程目的 gevent TCP服务端socket套接字实现协程 Event事件 用来控制线程的执行 出现e.wait(),就会把这个线程设 ...

  8. luoguP1972 [SDOI2009]HH的项链

    经典颜色问题推荐博文 https://www.cnblogs.com/tyner/p/11519506.html https://www.cnblogs.com/tyner/p/11616770.ht ...

  9. 再次体会wireshark的威力!

    今天一位同学给我打电话,说是重启了客户机房里的一台服务器A,重启之后此台服务器不能与B服务器通信了,要命的是A台服务器上有关键数据需要与B服务器进行通信交互.客户大发雷霆,同学的老板也发火一再催促要尽 ...

  10. 设计模式-Prototype(通过复制构造函数实现自我复制)-(创建型模式)

    以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //Prototype.h #pragma once class Prototype { public: virtual ~P ...