详解如何在 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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
基于JQuery实现页面定时弹出广告
May 08 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中与数组相关的函数
2007/03/22 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
JavaScript实现三级级联特效
2017/11/05 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python转换摩斯密码示例
2014/02/16 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python实现按长宽比缩放图片
2018/06/07 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
五年级学生评语
2014/04/22 职场文书
人事经理岗位职责
2014/04/28 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
租车协议书
2015/01/27 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
业务内勤岗位职责
2015/04/13 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android