Vue 中引入第三方 JS 庫

以 jQuery 爲例

1、絕對路徑直接引入，全局可用

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

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

這樣，其實就已經能夠在項目中使用 jQuery 了。

mounted () {
  console.log($)
}

咱們來看一下 調試器 截圖：

能夠看到，咱們是能夠正常打印出 jQuery 的。
因爲個人項目開啓了 ESLint 檢測，因此也會報一個 warning[警告] ：'$' is not defined 。

咱們可讓 ESLint 不檢查這一行：

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

加了 /* eslint-disable */ 之後，就不會報那個警告了。

 

2、絕對路徑直接引入，配置後，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 標籤來引入 jQuery 的話，咱們還有方法

 

3、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，也是沒有任何問題的

4、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 。

一、如今的項目通常都會加入 ESLint 代碼檢查，因此推薦使用第二種或者第三種方式（這兩種方式在使用的時候都須要先 import 引入，而後再使用，也就不存在 ESLint 報 not defined 的問題）

二、若是你的項目沒有使用 ESLint ，第一種和第四種也是不錯的選擇。

三、若是你使用了 ESLint，仍然想使用第一種或者第四種方式，那麼，咱們就得在 ESLint 的配置文件中添加規則：'no-undef': 0