详解如何在 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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery实现简单QQ聊天框
Aug 27 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 异常处理实现代码
2009/03/10 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php实现两个数组相加的方法
2015/02/17 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
在Django的通用视图中处理Context的方法
2015/07/21 Python
解析Python的缩进规则的使用
2019/01/16 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python顺序执行多个py文件的方法
2019/06/29 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
技术负责人任命书
2014/06/05 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
作弊检讨书范文
2015/05/06 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server