Vue中引入jQuery

兩種在vue中引入jQuery的方式

 

第一種：普通html中使用jq

將jQuer的文件導入到項目中，然后直接使用<script src="jQuery.js"></script>即可。

 

 

第二種：vue組件中使用jq

1、安裝依賴

cnpm install jquery --save 或者 npm install jquery --save;

 

2、此處也有兩種方式

一、組件中直接使用jq 

二、使用全局變量

 

2.1 組件中直接使用

我們想在哪個組件中使用jQuery庫，首先要使用如下命令引入jquery，然后就可以正常使用了

import $ from 'jquery'

 

比如，我們要在 App.vue組件中使用jQuery，實例代碼如下：

<template>
  <div id="app">
   
  </div>
</template>

<script>
  import $ from 'jquery'

  export default {
    name: 'App',
    components: {},
    data: function () {
      return {}
    },
    created:function(){
      console.log($('#app'));
    }
  }
</script>

<style>

</style>

 

 

2.2 使用全局變量

若每一個組件中都可以使用jquery，必須在每個組件中寫：import $ from 'jquery';

比較麻煩，所以使用全局變量

 

1）webpack.base.conf.js文件中引入

在項目中找到webpack.base.conf.js文件，在開頭使用以下代碼引入webpack，因為該文件默認沒有引用。

let webpack = require('webpack')

 

截圖，如下所示

 

 

2）在同文件：webpack.base.conf.js中，找到module.exports中添加一段代碼

// 添加代碼
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
],

截圖中，省略了部分代碼

 

 

3）避開eslint 檢查

修改根目錄下.eslintrc.js 文件的env 節點，為env添加一個鍵值對 jquery: true 就可以了

env: {
// 原有
browser: true,
// 添加
jquery: true
}

截圖如下

 

 

4）重新啟動項目 npm run dev，可直接使用$

不需要再import 引用 jQuery 了，可以 直接使用$了

console.log($('選擇器')) ，你會發現成功使用jQuery獲取到了DOM

或者按下面的，能看到jq是一個函數

 

 

 

 

 

 

 

本文引自：

https://blog.csdn.net/fengzhen8023/article/details/83047090

https://www.zhihu.com/tardis/sogou/art/108689913