vue学习【第七篇】:Vue之导入Bootstrap
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的更多相关文章
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习笔记七:Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- vue学习【二】vue结合axios动态引用echarts
大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...
- Vue学习【第一篇】:Vue初识与指令
什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...
- vue学习笔记(七)组件
前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习【一】vue引用封装echarts并展示多个echarts图表
大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...
- 前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...
- Vue学习第一天:Vue.js指令系统
1. 如何使用Vue.js? 1.1 直接引入 - <script src="./statics/vue.min.js"></script> - 引入之后在 ...
随机推荐
- 通过Referer设置来防盗链
在Servlet中需要设置防盗链功能时可以通过以下代码: String referer = request.getHeader("Referer"); if(referer == ...
- meta twitter 属性
总结下国际范儿的meta标签 <meta name="A game made to inspire developers to use GSAP, ES6 and Flexbox&qu ...
- Sql Server参数化查询之where in和like实现详解 [转]
文章导读 拼SQL实现where in查询 使用CHARINDEX或like实现where in 参数化 使用exec动态执行SQl实现where in 参数化 为每一个参数生成一个参数实现where ...
- html5-表单和input元素用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 交替最小二乘ALS
https://www.cnblogs.com/hxsyl/p/5032691.html http://www.cnblogs.com/skyEva/p/5570098.html 1. 基础回顾 矩阵 ...
- Linux 运维测试及第三应用及测试工具
一 .第三方应用及测试工具链接地址 https://pan.baidu.com/s/1rLQ5NCZvxcy93YQ4fGFaBQ 1.linux LSI系列raid卡监测工具 1)使用参数详解链接: ...
- 20155228 2016-2017-2 《Java程序设计》第8周学习总结
20155228 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 NIO与NIO2 NIO使用频道来衔接数据节点,在处理数据时,NIO可以让你设定缓冲区容量, ...
- arm cortex-m0plus源码学习(三)GPIO
概述: Cortex-m0的integration_kit提供三个GPIO接口,其中GPIO0传输到外部供用户使用,为EXTGPIO:GPIO1是内核自己的信号,不能乱改,会崩掉:GPIO2是一些中断 ...
- Qt 之 模态、非模态、半模态窗口的介绍及 实现QDialog的exec()方法
一.简述 先简单介绍一下模态与非模态对话框. 模态对话框 简单一点讲就是在弹出模态对话框时,除了该对话框整个应用程序窗口都无法接受用户响应,处于等待状态,直到模态对话框被关闭.这时一般需要点击对话框中 ...
- ubuntu_virtualenv
sudo pip install virtualenv 1.安装virtualenv(需要先安装pip): $ [sudo] pip install virtualenv 2.创建虚拟环境: $ vi ...