vue 中引入第三方js庫

2022-05-17 00:00:22 字數 2078 閱讀 3802

以 jquery 為例

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

這樣,其實就已經可以在專案中使用 jquery 了。

mounted ()
我們來看一下 偵錯程式 截圖:

可以看到,我們是可以正常列印出 jquery 的。

由於我的專案開啟了 eslint 檢測,所以也會報乙個warning[警告]'$' is not defined

我們可以讓 eslint 不檢查這一行:

mounted ()
加了 /* eslint-disable */ 以後,就不會報那個警告了。

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

於是,我們有了第二種方法

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

然後,我們可以在 webpack 中配置乙個 externals

externals:
這樣,我們就可以在每乙個元件中用import來引用這個 jquery 了。

import $ from 'jquery'export 

default

}

控制台截圖如下:

很好,沒有任何問題,我們可以在這個元件中 隨意的 任意的 多次的 來使用 $ 了。

ok,咱們已經介紹兩種方式了,它們有乙個共同點:都需要在主入口頁面 index.html 中,用 script 標籤來引入 jquery。

如果你不想在 inde.html 中使用 script 標籤來引入 jquery 的話,我們還有方法

我們不需要在主入口檔案 index.html 中引入 jquery 。我們只需要在 webpack 的配置檔案中,在 resolve 中為 jquery 新增乙個 alias[別名] 。

resolve:

}

那麼,我們就可以在任意元件中,通過 import 的方式來使用 jquery 了。

控制台截圖:

ok,也是沒有任何問題的

在第三種的基礎上,如果我們增加乙個 plugins 的配置,那麼,我們在使用的時候,無需import $ from 'jquery'也可以。

resolve:

},plugins:[

new webpack.provideplugin()

]

這個時候,我們在專案中,就可以直接使用$了。

同理,由於我的專案使用了 eslint ,所以需要在使用了$的**前新增/* eslint-disable*/來去掉 eslint 的檢查,否則會報錯:'$' is not define

第一種和第四種方式使用的時候,不需要 import ,全域性直接可用;第二種和第三種方式使用的時候,需要先 import 。

1、現在的專案一般都會加入 eslint **檢查,所以推薦使用第二種或者第三種方式(這兩種方式在使用的時候都需要先 import 引入,然後再使用,也就不存在 eslint 報 not defined 的問題)

2、如果你的專案沒有使用 eslint ,第一種和第四種也是不錯的選擇。

3、如果你使用了 eslint,仍然想使用第一種或者第四種方式,那麼,我們就得在 eslint 的配置檔案中新增規則:'no-undef': 0

Vue 中如何引入第三方 JS 庫

我們以 jquery 為例,來講解 主入口頁面 index.html 中用script標籤引入 這樣,其實就已經可以在專案中使用 jquery 了。mounted 我們來看一下 偵錯程式 截圖 可以看到,我們是可以正常列印出 jquery 的。由於我的專案開啟了 eslint 檢測,所以也會報乙個 ...

引入三方庫 Xcode中引入第三方庫

我在網上也看過了很多的資料,關於怎麼引用第三方庫,但是看得我也是眼花繚亂。有的是使用第三方管理程式cocoapods,看起來好像很好用的樣子,本來還期望它能像nutget一樣方便,但是有點失望了。操作基本都是使用命令列,關鍵是我按照別人部落格上說的操作了一波,結果不行。操作不僅不方便還會有一堆的問題...

VUE引入第三方外掛程式

vue 引入第三方外掛程式方法 1 如果是第三方 npm 模組檔案 檔案統一放入src assets js 資料夾下 統一在main.js 內引入 import parse from assets js plugin.js import assets js plugin.js 2 如果是第三方非 n...