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: '$' }] }

如圖：

佛山vi設計https://www.houdianzi.com/fsvi/ 豌豆資源搜索大全https://55wd.com

5、使用，在需要使用的頁面引用，代碼：

const $ = require('jquery')

 在控制台進行測試打印，代碼如：

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

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

（tips: 為什么說成功呢，因為 $(this).hasClass('testClass')  是用來判斷當前元素是否存在testClass 這樣一個名的class）