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的使用详解
Jun 14 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
基于jQuery拖拽事件的封装
Nov 29 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+MySQL的聊天室设计
2006/10/09 PHP
PHP注释实例技巧
2008/10/03 PHP
php db类库进行数据库操作
2009/03/19 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
webpack配置的最佳实践分享
2017/04/21 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
会计专业推荐信
2013/10/29 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
任命书格式范文
2015/09/22 职场文书
2016简单的租房合同范本
2016/03/18 职场文书