Vue 中如何引入第三方 JS 庫

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

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

我們以 jQuery 為例，來講解

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

主入口頁面 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 標簽來引入 jQuery 的話，我們還有方法

---

三、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

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