详解如何在 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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 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
关于手调机和数调机的选择
2021/03/02 无线电
PHP 采集程序中常用的函数
2009/12/09 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
如何在Python中编写并发程序
2016/02/27 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python 搜索大文件的实例代码
2019/07/08 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python输出指定字符串的方法
2020/02/06 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
python 基于opencv实现图像增强
2020/12/23 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
弘扬雷锋精神演讲稿
2014/05/10 职场文书
年终奖发放方案
2014/06/02 职场文书
献爱心标语
2014/06/21 职场文书
学校读书活动总结
2014/06/30 职场文书
党员个人总结范文
2015/02/14 职场文书