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')，如图：

4、同时配置依赖，代码 ：

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

如图：

5、使用，在需要使用的页面引用，代码：

const $ = require('jquery')

 在控制台进行测试打印，代码如：

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

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

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6327