Vue添加jquer插件

1、現象

綜合開發須要，須要引用使用

 

2、解決

一、先安裝jquer插件，命令運行： npm i jquery --save-dev 

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

 

二、利用 expose-loader 模塊 來引用jquery插件 ，命令運行： npm i expose-loade --save-dev

 

三、配置webpack.base.conf，在其中添加 'jquery': path.resolve(__dirname, '../node_modules/jquery/dist/jquery.min')，如圖：

 

 

 

四、同時配置依賴，代碼 ：

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

如圖：

 

五、使用，在須要使用的頁面引用，代碼：

const $ = require('jquery')

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

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

若是打印爲 flase ,恭喜您，成功了。

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

 

3、總結：

 

好記憶不如動動手。。。