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中的deferred使用方法
Mar 27 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现开关灯效果
Aug 02 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
javascript学习网址备忘
2007/05/29 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
理解Python垃圾回收机制
2016/02/12 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
WxPython实现无边框界面
2019/11/18 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
创意活动策划书
2014/01/15 职场文书
《长城》教学反思
2014/02/14 职场文书
请假条范文大全
2014/04/10 职场文书
服务行业口号
2014/06/11 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
开会通知短信大全
2015/04/20 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
周一给客户的问候语
2015/11/10 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis