Vue引入bootstrap主要有两种方法

方法一:在main.js中引入

此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效

引入jQuery

在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  若是运行报错,则运行cnpm install jquery (cnpm和npm都可以)这样就将jquery安装到了这个项目中。

然后修改webpack.base.conf.js(在build文件下)两个地方:

1 加入

var webpack=require('webpack');

2 在module.exports的里面加入

plugins:[

   new webpack.optimize.CommonsChunkPlugin('common.js'),

   new webpack.ProvidePlugin({

        jQuery: "jquery",

        $: "jquery"

   })

]

最后在main.js中加入import $ form 'jquery',完成jquery的引入

引入 bootstrap.css文件:

修改webpack.base.conf.js

resolve:{
  extensions: ['.js', '.vue', '.json'],
  alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'bootstrap':resolve('src/assets/bootstrap'),
  }
},

在main.js中import引入

import'bootstrap/js/bootstrap.min.js'
import'bootstrap/css/bootstrap.min.css'

方法二:在index.html中引入,一般建议使用此方法引入bootstrap

在index.html文件中引入bootstrap时,注意加入<meta>标签实现响应式,未加此标签时,可能会出现手机模式时,响应式无法实现。

<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

本地引用:

先在static目录下放所需加载的bootstrap文件

然后在index.html中引入

目录路径为你所放位置的路径。

远程引入:

直接加载远程的bootstrap文件

 

vue学习【第七篇】:Vue之导入Bootstrap的更多相关文章

  1. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  2. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  3. vue学习【二】vue结合axios动态引用echarts

    大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...

  4. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

  5. Vue学习【第一篇】:Vue初识与指令

    什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...

  6. vue学习笔记(七)组件

    前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...

  7. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

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

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

  9. 前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)

    文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...

  10. Vue学习第一天:Vue.js指令系统

    1. 如何使用Vue.js? 1.1 直接引入 - <script src="./statics/vue.min.js"></script> - 引入之后在 ...

随机推荐

  1. SQL Server数据库(时间戳timestamp)类型

    1.公开数据库中自动生成的唯一二进制数字的数据类型. 2.timestamp 通常用作给表行加版本戳的机制. 3.存储大小为 8 个字节. 不可为空的 timestamp 列在语义上等价于 binar ...

  2. Mongodb 分组查询例子

    db.tblCard.aggregate([     {         $match: {             "sNo": {                 " ...

  3. pdf转txt

    ubuntu pdf转jpg或txt chenlei posted @ 2009年12月30日 17:22 inLinux , 1818 阅读 呵呵,刚刚在网上定购了一款mp5,后来才发现它不支持PD ...

  4. hdu5489 树状数组+dp

    2015-10-06 21:49:54 这题说的是个给了一个数组,然后删除任意起点的一个连续的L个数,然后求最长递增子序列<是递增,不是非递减>,用一个树状数组维护一下就ok了 #incl ...

  5. redis 性能建议

    因为 RDB 文件只用作后备用途,建议只在 Slave 上持久化 RDB 文件,而且只要15分钟一次就够了,只保留 save 900 1 这条规则. 如果 Enable AOF,好处是在恶劣请看下也只 ...

  6. 使用IntelljIDEA生成接口的类继承图及装饰器模式

    类图生成方法 以一个装饰器模式实现数学运算的例子为例. 安装 Intellj Ultimate , lience server: http://xdouble.cn:8888/ 在类上右键点击 cla ...

  7. 设置PyCharm创建文件时自动添加头文件

    找到该路径并添加以下信息 File->settings->Editor->File and Code Templates->Python Script  #!/usr/bin/ ...

  8. web前端学习路线(含20个真实web开发项目集合)

    目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...

  9. Tensorflow timeline trace

    根据 https://github.com/tensorflow/tensorflow/issues/1824 简单进行了测试 修改运行的脚本增加如下关键代码 例如mnist_softmax.py f ...

  10. Centos7 在apache+php7环境下 安装 Discuz!X3.4

    拉取Discuz!X3.4代码 git 地址 : https://gitee.com/ComsenzDiscuz/DiscuzX 在/var/www/html 中新建 bbs 文件夹 将git下upl ...