Vue 中如何引入第三方 JS 庫

• • 一絕對路徑直接引入全局可用
  • 二絕對路徑直接引入配置後import 引入後再使用
  • 三webpack中配置 aliasimport 引入後再使用
  • 四webpack 中配置 plugins無需 import 全局可用
  • 結論

咱們以 jQuery 爲例，來說解

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

主入口頁面 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 */ 之後，就不會報那個錯了。

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

轉自：http://blog.csdn.net/csdn_yudong/article/details/78795743