Vue添加引入jquery插件入门百科_插件基础入门

一、现象综合开发需要,需要引用使用 二、解决1、先安装jquer插件,命令运行:npm i jquery –save-dev (tips: i 也就是 install –save-dev为添加到package.json) 2、利用 expose-loader 模块 来引用jquery插件 ,命令运行: npm i expose-loade –sav

Vue添加引入jquery插件入门百科

一、现象

Vue添加引入jquery插件入门百科_插件基础入门

综合开发需要,需要引用使用

 

二、解决

1、先安装jquer插件,命令运行:

npm i jquery --save-dev

 (tips:  i  也就是 install –save-dev为添加到package.json)

 

2、利用 expose-loader 模块 来引用jquery插件 ,命令运行: 

npm i expose-loade --save-dev

 

3、配置webpack.base.conf,在其中添加 ‘jquery’: path.resolve(__dirname, ‘../node_modules/jquery/dist/jquery.min’),如图:

 Vue添加引入jquery插件入门百科_插件基础入门

4、同时配置依赖,代码 :

{
  test: require.resolve('jquery'),
  use: [{
    loader: 'expose-loader',
    options: '$'
  }]
}

如图:

Vue添加引入jquery插件入门百科_插件基础入门

5、使用,在需要使用的页面引用,代码:

const $ = require('jquery')

 在控制台进行测试打印,代码如:

console.log($(this).hasClass('testClass'))

如果打印为 flase ,恭喜您,成功了。

(tips: 为什么说成功呢,因为 $(this).hasClass(‘testClass’)  是用来判断当前元素是否存在testClass 这样一个名的class)

海计划公众号
(0)
上一篇 2020/03/23 08:56
下一篇 2020/03/23 08:56

您可能感兴趣的内容

  • Web登录其实没那么简单基础知识入门_登录小白攻略

    来自:letcafe 1、一个简单的HTML例子看看用户信息安全标准的HTML语法中,支持在form表单中使用标签来创建一个HTTP提交的属性,现代的WEB登录中,常见的是下面这样的表单:<form action = "http://localhost:8080/Application/login" method = "POS

    2020/04/03
  • DataTables指南攻略_一个开源、简单易用的jQuery表格插件

    DataTables指南攻略 官方网址:https://www.datatables.net/ GitHub:https://github.com/DataTables/DataT…

    2020/03/06
  • css实现不定宽高的图片img居中裁剪基础知识类似微信朋友圈图片效果_图片入门百科

    需求如下: 前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果,等比例正方形显示在列表中,让图片根据宽高来自适应显示在页面上。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?mate标签:<meta name="viewport" content="width=device-wi

    2020/04/05
  • apache的<directory>语句以及属性的含义零基础入门_Apache入门基础

    在整完apache和tomcat的之后我觉得有必要把和它下面的属性捋顺一下。如何访问根目录下的目录http://192.168.1.12/test/第一.缺省apache不允许访问http目录(没有定义,就没有访 问权限)访问目录http://192.168.1.12/test/会显示: Forbidden
    You don’t hav

    2020/04/03
  • reframe.js教程视频_将非响应式的元素变成响应式元素的 Js插件

    reframe.js教程视频 官方网址:https://dollarshaveclub.github.io/reframe.js/ GitHub:https://github.co…

    2020/03/06
  • Js中按位操作符的有趣应用使用攻略_运算使用帮助

    JavaScript提供了几种运算符,可以对一些简单的值进行基本操作,比如算术操作、赋值操作、逻辑操作、按位操作等。我们经常可以看到混合了赋值操作,算术操作和逻辑操作的JavaScript代码。但是,按位操作的代码就不是那么常见了。JavaScript的按位操作符~ — 按位非& — 按位与| — 按位或^ — 按位异或<> — 有符号右移>>

    2020/03/29
  • 浏览器插件入门教程常用谷歌浏览器插件推荐_插件指南攻略

    常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。谷歌访问助手:浏览器必备插件由于外网的限制,除非翻墙,不然很多人是打不开 Chorme 网上应用商店的,而「谷歌访问助手」就能够完美

    2020/04/03
  • js实现html转pdf基础知识入门html2canvas.js截图不全的问题小白教程_pdf

    最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现。实现的过程是 先用html2canvas.js把html页面转成图片,再用jsPdf.js把图片导出为pdf。于是做了个小案例来测试这个功能。<

    2020/04/05
  • location.hash属性#入门百科window.location.hash 使用_Hash基础指南

    URL中hash 属性目前所有主要浏览器都支持 hash 属性。hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。比如:http://www.fly63.com/index.html#print就代表网页index.html的print的位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。为网页位置指

    2020/04/03
  • 图片预览以及上传显示进度小白知识_上传入门攻略

    在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化。 1.搭建项目基于Vue.js+axios搭建的项目,新建一个Index.Vue项目如下,基本结构可以先可以选择文件,预览文件。<h2 c

    2020/03/26
  • 理解css中Grid布局,在项目中如何实现grid页面布局入门攻略_布局基础知识教程

    简介CSS中Grid是一种二维网格式布局方式。我们常规使用table、float、position、inline-block等布局,但它们遗漏了很多功能,例如垂直居中。后来css3中flexbox的出现解决了很多布局问题,但是它也是一维布局,而不是复杂的二维布局,Grid是为了解决二维布局问题而创建的CSS模块。使用Gird的好处1.布局清晰明了,摆脱了模板

    2020/04/06
  • MVC设计思想小白帮助_MV基础入门

    MVC是一种软件架构的思想,即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离;(1)模型: 业务逻辑包含了业务数据的加工与处理以及相应的基础服务(为了保证业务逻辑能够正常进行的事务、安全、权限、日志等等的功能模块);(2)视图:展现模型处理的结果;另外,还要提供相应的操作界面,方便用户使用。(3)控制器:视图发请

    2020/03/31
  • Fundebug基础知识教程_一行代码搞定BUG监控!

    Fundebug基础知识教程 官方网址:https://www.fundebug.com/ 简介描述:一行代码搞定BUG监控! Fundebug提供全栈错误监控服务,通过邮件、钉钉…

    2020/03/06
  • 前端常用的CSS动画库小白教程_库指南攻略

    前端常用的CSS动画库小白教程 动效设计一直都是最近几年前端开发的热门趋势之一。动画是Web和UI设计的主要内容。一个完全静止的网站,即使是使用了微妙的悬停状态,也可能感觉不一样。…

    2020/03/20
  • js实现放大镜效果菜鸟教程网_效果小白常识

    使用电脑逛淘宝,京东等商城时,将鼠标移入图片中,图片会放大,之前一直在想这种是怎么实现的,前两天刚写出来,纯js实现的,无任何工具库。下面先来看下思路吧!刚学js的时候可能对于布局不是很重要,但学到面向对象编程后,布局就变得很重要了,有时候布局会影响到整体效果;先来看下布局吧!<img

    2020/03/26
  • 快速了解 mpvue 开发小程序使用指南_mpvue小白攻略

    一、概念mpvue是 美团修改了 Vue.js的 runtime和 compiler使其可以运行在小程序环境中,从而引入了整套 Vue.js开发体验的小程序框架。二、优化细节1、实例生命周期不同于vue的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期除了 Vue 本身的生命周期外(详细的 vue 生命周期文档请看生命周期钩子

    2020/03/20