以 jquery 為例
主入口頁面 index.html 中用script
標籤引入:
mounted ()我們來看一下 偵錯程式 截圖:
可以看到,我們是可以正常列印出 jquery 的。
由於我的專案開啟了 eslint 檢測,所以也會報乙個warning[警告]
:'$' is not defined
。
我們可以讓 eslint 不檢查這一行:
mounted ()加了 /* eslint-disable */ 以後,就不會報那個警告了。
第一種方法有乙個弊端就是:我們每乙個使用了 $ 的地方,都要再前面加上 /* eslint-disable */ ,這顯然是不方便的。
於是,我們有了第二種方法
還是先在主入口頁面 index.html 中用 script 標籤引入:
然後,我們可以在 webpack 中配置乙個 externalsexternals:這樣,我們就可以在每乙個元件中用
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...