Vue 中引入第三方 JS 庫

以 jQuery 爲例html

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

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

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

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

mounted () {
  console.log($)
}

咱們來看一下 調試器 截圖:webpack

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

咱們可讓 ESLint 不檢查這一行:json

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

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

 

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

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

因而,咱們有了第二種方法spa

仍是先在主入口頁面 index.html 中用 script 標籤引入:3d

<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

相關文章
相關標籤/搜索