1. 程式人生 > >vue中如何引入第三方庫

vue中如何引入第三方庫

雖然說jquery從某些角度說已經過時了,對他的情結還是在的,在vue中用用jquery也不是不可以的,但是要怎麼引入呢,總不能直接<script src='jquery.js'></script>吧。當然這也是一種辦法,只不過優點過於簡單粗暴,而且eslint也會檢查報錯

首先要  npm install jquery --save

(1)最簡單的辦法就是在哪個元件用就在那裡直接import $ from 'jquery';

        這樣做比較麻煩,像swiper,echarts等外掛可以這樣使用,因為一個應用中可能只有一個元件用到這個外掛,jquery就不同          了,各個地方都可能用到它

(2)第二種方法是修改webpack檔案,本人對webpack不是特別熟悉,這種方法承蒙網上各位大佬的分享

      在腳手架生成的資料夾中找到build資料夾,開啟其中的webpack.base.config.js

在檔案頭新增 const webpack=require('webpack');引入webpack

找到alias屬性,新增 ‘name’:'jquery'鍵值對,這裡是給jquery模組起一個別名

        

然後在module.exports物件中新增一個屬性

這個屬性與resolves並列,新增完成後就能重新啟動腳手架就能在各個元件中使用$ 和jQuery函數了,不需要import也能使用