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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery实现推拉门效果
Oct 19 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截取指定图片大小的方法
2014/12/10 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Python使用Pygame绘制时钟
2020/11/29 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
sort命令的作用和用法
2013/08/25 面试题
安全教育感言
2014/03/04 职场文书
学校课外活动总结
2014/05/08 职场文书
关于运动会的口号
2014/06/07 职场文书
目标责任书格式
2014/07/28 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python