我們以 jQuery 為例，來(lái)講解

一、絕對(duì)路徑直接引入，全局可用

主入口頁(yè)面 index.html 中用 script 標(biāo)簽引入：

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

這樣，其實(shí)就已經(jīng)可以在項(xiàng)目中使用 jQuery 了。

mounted () {
  console.log($)
}

可以看到，我們是可以正常打印出 jQuery 的。

由于我的項(xiàng)目開(kāi)啟了 ESLint 檢測(cè)，所以也會(huì)報(bào)一個(gè) warning[警告] ：'$' is not defined 。

我們可以讓 ESLint 不檢查這一行： 加了 /* eslint-disable */ 以后，就不會(huì)報(bào)那個(gè)警告了。 二、絕對(duì)路徑直接引入，配置后，import 引入后再使用 第一種方法有一個(gè)弊端就是：我們每一個(gè)使用了 $ 的地方，都要再前面加上 /* eslint-disable */ ，這顯然是不方便的。

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

二、絕對(duì)路徑直接引入，配置后，import 引入后再使用

還是先在主入口頁(yè)面 index.html 中用 script 標(biāo)簽引入：

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

然后，我們可以在 webpack 中配置一個(gè) externals

externals: {
  'jquery': 'jQuery'
}

這樣，我們就可以在每一個(gè)組件中用 import 來(lái)引用這個(gè) jquery 了。

import $ from 'jquery'
export default {
  created() {
    console.log($)
  }
}

這樣，我們就可以在每一個(gè)組件中用 import 來(lái)引用這個(gè) jquery 了。 如果你不想在 inde.html 中使用 script 標(biāo)簽來(lái)引入 jQuery 的話，我們還有方法

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

我們不需要在主入口文件 index.html 中引入 jQuery 。我們只需要在 webpack 的配置文件中，在 resolve 中為 jQuery 添加一個(gè) alias[別名] 。

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

那么，我們就可以在任意組件中，通過(guò) import 的方式來(lái)使用 jquery 了。

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

控制臺(tái)截圖：

四、webpack 中配置 plugins，無(wú)需 import 全局可用

在第三種的基礎(chǔ)上，如果我們?cè)黾右粋€(gè) plugins 的配置，那么，我們?cè)谑褂玫臅r(shí)候，無(wú)需 import $ from 'jquery' 也可以。

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

這個(gè)時(shí)候，我們?cè)陧?xiàng)目中，就可以直接使用 $ 了。

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

同理，由于我的項(xiàng)目使用了 ESLint ，所以需要在使用了 $ 的代碼前添加 /* eslint-disable*/ 來(lái)去掉 ESLint 的檢查，否則會(huì)報(bào)錯(cuò)：'$' is not define

結(jié)論

第一種和第四種方式使用的時(shí)候，不需要 import ，全局直接可用；第二種和第三種方式使用的時(shí)候，需要先 import 。

到此這篇關(guān)于Vue中引入第三方JS庫(kù)的文章就介紹到這了,更多相關(guān)Vue引入第三方JS庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論