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实现动态删除LI的方法
May 30 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
如何在vue 中引入使用jquery
Nov 10 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
第五章 php数组操作
2011/12/30 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
浅谈PHP中的
2016/04/23 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
小程序实现录音功能
2020/09/22 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
使用requests库制作Python爬虫
2018/03/25 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python从子线程中获得返回值的方法
2019/01/30 Python
用python写PDF转换器的实现
2020/10/29 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
小学生自我评价范例
2013/09/24 职场文书
2014年元旦感言
2014/03/06 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
设计师求职信
2014/07/01 职场文书
毕业横幅标语
2014/10/08 职场文书
停水通知
2015/04/16 职场文书
小型婚礼主持词
2015/06/30 职场文书
宣传稿格式范文
2015/07/23 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers