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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python检测网站链接是否已存在
2016/04/07 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Python random模块用法解析及简单示例
2017/12/18 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
见习期自我鉴定
2013/11/07 职场文书
农村党支部先进事迹
2014/01/14 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
儿童生日会策划方案
2014/05/15 职场文书
暑期教师培训方案
2014/06/07 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
golang import自定义包方式
2021/04/29 Golang
golang 实现并发求和
2021/05/08 Golang
深入探讨opencv图像矫正算法实战
2021/05/21 Python
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle