vue中如何引入jQuery和Bootstrap


Posted in jQuery onApril 10, 2017

这两天学习了Vue.js ,所以,今天添加一点小笔记。

一、引入jQuery

在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  这样就将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'

三、引入bootstrap.min.js文件:

在main.js中import引入

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 #jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 #jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 #jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
利用jQuery解析获取JSON数据
Apr 08 #jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
You might like
php中过滤非法字符的具体实现
2013/10/29 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
javascript call和apply方法
2008/11/24 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python dlib人脸识别代码实例
2019/04/04 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
中科创达面试题
2016/12/28 面试题
课改先进个人汇报材料
2014/01/26 职场文书
村干部承诺书
2014/03/28 职场文书
政工例会汇报材料
2014/08/26 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
2015小学师德工作总结
2015/07/21 职场文书