详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件


Posted in jQuery onJune 01, 2017

使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码

// 在开头引入webpack,后面的plugins那里需要
var webpack = require('webpack')
// resolve

module.exports = {
 // 其他代码...
 resolve: {
  extensions: ['', '.js', '.vue'],
  fallback: [path.join(__dirname, '../node_modules')],
  alias: {
   'src': path.resolve(__dirname, '../src'),
   'assets': path.resolve(__dirname, '../src/assets'),
   'components': path.resolve(__dirname, '../src/components'),

   // webpack 使用 jQuery,如果是自行下载的
   // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
   // 如果使用NPM安装的jQuery
   'jquery': 'jquery' 
  }
 },

 // 增加一个plugins
 plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })
 ],

 // 其他代码...
}

这样就可以正确的使用jQuery了,比如我要引入Bootstrap,我们在vue的入口js文件src/main.js开头加入

// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'

这样Bootstrap就正确的被引用并构建。

在比如使用toastr组件,只需要在需要的地方import进来,或者全局引入css在需要的地方引用js,然后直接使用

// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'

toastr.success('Hello')

vue-cli webpack全局引入jquery

1、首先在package.json里加入,

dependencies:{
 "jquery" : "^2.2.3"
}

然后 nmp install

2、在webpack.base.conf.js里加入

var webpack = require("webpack")

3、在module.exports的最后加入

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  jQuery: "jquery",
  $: "jquery"
 })
]

4、然后一定要重新 run dev

5、在main.js 引入就ok了

import $ from 'jquery'

在.vue文件中引入第三方非NPM模块

var Showbo = require("exports?Showbo!./path/to/showbo.js");

vue-cli引入外部文件

webpack.base.conf.js 中添加externals

详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

externals 中 swiper 是键,对应的值一定的是插件 swiper.js 所定义的变量 Swiper :

详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

之后再在根目录下的index.html文件里引入文件: <script src="static/lib/swiper.js"></script>

这样子就可以在需要用到swiper.js的文件里加入这行代码:import Swiper from 'swiper',这样就能正常使用了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 #jQuery
jquery网页加载进度条的实现
Jun 01 #jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 #jQuery
jQuery实现动态删除LI的方法
May 30 #jQuery
jQuery异步提交表单实例
May 30 #jQuery
Angular2使用jQuery的方法教程
May 28 #jQuery
Jquery中attr与prop的区别详解
May 27 #jQuery
You might like
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
python获取引用对象的个数方式
2019/12/20 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
中间件的定义
2016/08/09 面试题
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
会计专业自我鉴定
2014/02/10 职场文书
个人求职自荐信范文
2015/03/06 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript