一、絕對路徑直接引入，全域性可用

主入口頁面 index.html 中用 script 標籤引入：

<script src="./static/jquery-1.12.4.js"></script>

這樣，其實就已經可以在專案中使用 jQuery 了。

mounted () {
  console.log($)
}

我們來看一下 偵錯程式 截圖：

可以看到，我們是可以正常打印出 jQuery 的。
由於我的專案開啟了 ESLint 檢測，所以也會報一個 error ：'$' is not defined 。

我們可以讓 ESLint 不檢查這一行：

mounted () {
  /* eslint-disable */
  console.log($)
}

加了 /* eslint-disable */ 以後，就不會報那個錯了。

二、絕對路徑直接引入，配置後，import 引入後再使用

第一種方法有一個弊端就是：我們每一個使用了 $ 的地方，都要再前面加上 /* eslint-disable */ ，這顯然是不方便的。

於是，我們有了第二種方法

還是先在主入口頁面 index.html 中用 script 標籤引入：

<script src="./static/jquery-1.12.4.js"></script>

然後，我們可以在 webpack 中配置一個 externals

externals: {
  'jquery': 'jQuery'
}

這樣，我們就可以在每一個元件中用 import 來引用這個 jquery 了。

import $ from 'jquery'

export default {
  created() {
    console.log($)
  }
}

控制檯截圖如下：

很好，沒有任何問題，我們可以在這個元件中 隨意的 任意的 多次的 來使用 $ 了。

OK，咱們已經介紹兩種方式了，它們有一個共同點：都需要在主入口頁面 index.html 中，用 script 標籤來引入 jQuery。

如果你不想在 inde.html 中使用 script

三、webpack中配置 alias，import 引入後再使用

我們不需要在主入口檔案 index.html 中引入 jQuery 。我們只需要在 webpack 的配置檔案中，在 resolve 中為 jQuery 新增一個 alias 。

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    '@': resolve('src'),
    'jquery': resolve('static/jquery-1.12.4.js')
  }
}

那麼，我們就可以在任意元件中，通過 import 的方式來使用 jquery 了。

<script>
import $ from 'jquery'
export default {
  name: 'app',
  created() {
    console.log($)
  }
}
</script>

控制檯截圖：

OK，也是沒有任何問題的

四、webpack 中配置 plugins，無需 import 全域性可用

在第三種的基礎上，如果我們增加一個 plugins 的配置，那麼，我們在使用的時候，無需 import $ from 'jquery' 也可以。

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    '@': resolve('src'),
    'jquery': resolve('static/jquery-1.12.4.js')
  }
},
plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery'
  })
]

這個時候，我們在專案中，就可以直接使用 $ 了。

<script>
export default {
  name: 'app',
  created() {
    /* eslint-disable*/
    console.log($)
  }
}
</script>

同理，由於我的專案使用了 ESLint ，所以需要在使用了 $ 的程式碼前新增 /* eslint-disable*/ 來去掉 ESLint 的檢查，否則會報錯：'$' is not define

結論

第一種和第四種方式使用的時候，不需要 import ，全域性直接可用；第二種和第三種方式使用的時候，需要先 import 。

1、現在的專案一般都會加入 ESLint 程式碼檢查，所以推薦使用第二種或者第三種方式（這兩種方式在使用的時候都需要先 import 引入，然後再使用，也就不存在 ESLint 報 not defined 的問題）

2、如果你的專案沒有使用 ESLint ，第一種和第四種也是不錯的選擇。

3、如果你使用了 ESLint，仍然想使用第一種或者第四種方式，那麼，我們就得在 ESLint 的配置檔案中新增規則：'no-undef': 0

---------------------------(正文完)------------------------------------
一個 Vue 的學習交流群，想進來面基的，可以點選這個logo，或者手動search群號：685486827

更多學習資源請關注我的新浪微博…