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 Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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/09/22 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
又一个小巧的图片预加载类
2007/05/05 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
9种python web 程序的部署方式小结
2014/06/30 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
追悼会上的答谢词
2014/01/10 职场文书
学校十一活动方案
2014/02/01 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
生态养殖创业计划书
2014/05/06 职场文书
店面出租协议书范本
2014/11/28 职场文书
关于颐和园的导游词
2015/01/30 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
毕业班工作总结
2015/08/10 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书