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.form.js异步提交表单详解
Apr 25 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery实现购物车全功能
Jan 11 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
关于时间计算的结总
2006/12/06 PHP
php检查页面是否被百度收录
2015/10/28 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
扩展String功能方法
2006/09/22 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
PyQt5每天必学之事件与信号
2018/04/20 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
Python实现word2Vec model过程解析
2019/12/16 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python实现井字棋小游戏
2020/03/09 Python
关于Python错误重试方法总结
2021/01/03 Python
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
销售辞职报告范文
2014/01/12 职场文书
元旦联欢会感言
2014/03/04 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
党建工作经验交流材料
2014/05/25 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
爱心捐款感谢信
2015/01/20 职场文书
学校运动会通讯稿
2015/07/18 职场文书
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技