首頁 > 網際網路

如何在vue腳手架專案裡參照JQuery包

2019-12-11 10:54:42

vue固然是強大的前端框架,但是很多時候我們仍然需要參照Jquery包實現一些效果,下面給大家講解一下vue如何參照JQuery包

1

第一步

在package.json裡的dependencies加入一行

"jquery" : "^3.2.1"

參照jQuery包


2

第二步

cd 你的專案名稱

進入專案資料夾

執行

npm install jquery --save-dev 

安裝jQuery包


3

第三步

找到腳手架build資料夾下的webpack.base.conf.js檔案

在最上方新增一行:var webpack=require('webpack')


4

第四步

找到腳手架build資料夾下的webpack.base.conf.js檔案

module.exports中加入外掛plugins: [          new webpack.ProvidePlugin({                $:"jquery",                jQuery:"jquery",               "windows.jQuery":"jquery"      }) ],


5

第五步

在專案的入口檔案中main.js中新增一行import $ from 'jquery'

參照jquery


6

第六步

在測試元件用例HelloWorld.vue中

新增HTML程式碼 <h1 id="test">Test Jquery</h1>

新增JS程式碼 $('#test').click(function(){    alert('Test Jquery Success!');});



7

第七步

npm run dev進行編譯 然後瀏覽器中輸入127.0.0.1:8080

存取頁面點選Test Jquery

如果彈出視窗顯示Test Jquery Success!

表示JQuery參照成功



IT145.com E-mail:sddin#qq.com