vue之导入Bootstrap和Jquery
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">
(1) 本地引用:
先在static目录下放所需加载的bootstrap文件
然后在index.html中引入
目录路径为你所放位置的路径。
(2) 远程引入:
直接加载远程的bootstrap文件
vue之导入Bootstrap和Jquery的更多相关文章
- vue之导入Bootstrap以及jQuery的两种方式
Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的 ...
- vue项目引入bootstrap、jquery
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- vue学习【第七篇】:Vue之导入Bootstrap
Vue引入bootstrap主要有两种方法 方法一:在main.js中引入 此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效 引入jQuery 在当前项目的目录下 ...
- Vue.Js加入bootstrap及jquery,或加入其他插件vue-resource,vuex等
.引入jquery 项目目录下输入 cnpm install jquery --save-dev 用npm下载jq依赖 若想加入其他js库,如vue-resource,执行命令cnpm in ...
- vue中导入bootstrap.css
1.利用cnpm下载然后导入,用npm也是一样的: cnmp install bootstrap -S 在main.js文件下导入: import "bootstrap/dist/css/b ...
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- vue引入bootstrap、jquery
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- vue项目引入bootstrap正确姿势
vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...
- day64_10_8 vue的导入
一.简介 vue是一个渐进式的js框架.具体介绍查看官网: https://cn.vuejs.org 在vue框架中,有两个文件,当在开发阶段时使用完整版vue,因为有报错信息,而在上市阶段可以使用m ...
随机推荐
- 解决向github提交代码不用输入帐号密码
解决方案:方案一: 在你的用户目录下新建一个文本文件.git-credentials Windows:C:/Users/username Mac OS X: /Users/username Linux ...
- 查看Spring源码的方法
来自为知笔记(Wiz)
- TCPflow:在Linux中分析和调试网络流量的利器(转)
TCPflow是一款功能强大的.基于命令行的免费开源工具,用于在Unix之类的系统(如Linux)上分析网络流量.它可捕获通过TCP连接接收或传输的数据,并存储在文件中供以后分析,采用的格式便于协议分 ...
- python读写mysql总结
一.MySQLdb包的安装 1. 在win环境下,下载MySQL-python-1.2.3,有两种方式: (1) 下载src源码.tar.gz(这个源码需要build编译再安装.egg包(当于.jar ...
- Spring Boot 2.x(十七):快速入门Elastic Search
What -- Elasticsearch是什么? Elasticsearch是一个基于Lucene的搜索服务器,Elasticsearch也是使用Java编写的,它的内部使用Lucene做索引与搜索 ...
- Spring入门(四):使用Maven管理Spring项目
让我们先回顾下本系列的前3篇博客: Spring入门(一):创建Spring项目 Spring入门(二):自动化装配bean Spring入门(三):通过JavaConfig装配bean 1.为什么要 ...
- Linux下mysql启动失败
原因:强制重启服务器之后,发现mysql启动 失败 解决方法:强制清空 报错路径下的tmp文件,清空之后在tmp下面新建一个文件夹,文件夹的名字在你清空tmp之后启动mysql系统会给你提示 欧克,完 ...
- 如何使Label有修改功能
如何使Label有修改功能 之前制作一个项目时需要这样一个功能: 双击Label, 随后Label变为TextBox,用户修改后回车,TextBox变回Label 之前使用WPF做了一个,代码如下: ...
- Python 3.x 的一些注意事项
1. reload 被更改 需要 在console执行 from imp import reload 才能调用CT 同时,如果py文件是位于主文件夹深部的位置,可以这么做: import ComicT ...
- 2014-5-24 NOIP模拟赛
Problem 1 护花(flower.cpp/c/pas) [题目描述] 约翰留下他的N(N<=100000)只奶牛上山采木.他离开的时候,她们像往常一样悠闲地在草场里吃草.可是,当他回来的时 ...