jquery在vue腳手架中的使用方式示例
更新時間：2017年08月29日 09:28:22 作者：weixin_38788947
本篇文章主要介紹了jquery在vue腳手架中的使用方式示例，非常具有實用價值，需要的朋友可以參考下
本文介紹了jquery在vue腳手架中的使用方式示例，分享給大家，具體如下：
1：在各個vue文件中使用
<script>
import '../assets/js/jquery-1.10.2.min.js'
export default {
data() {
return {
},
watch: {
},
created: function() {
},
methods: {
list() {
this.$router.push({
path: 'list'
});
},
},
}
$(document).ready(function(){
$('.span123').click(function(){
alert('123')
})
})
</script>
這種方式不會影響原來VUE文件中的$的使用，完全可行；但是需要每個vue文件都引入一遍；
2：在入口文件app.vue中整體引入，不會報錯
3：在main.js中整體引入，
4：在index.html中整體引入
以上3中方法經過親測，不會報錯，但是VUE文件中的JS也不會執(zhí)行，不可行；
下面的方法經過親測，完全可行；
通過npm安裝依賴引入
1：通過npm安裝依賴引入
npm install jquery -S
2：修改webpack配置文件
build/webpack.base.conf.js
...
var webpack = require("webpack") // 1. 確保引入 webpack，后面會用到
module.exports = {
...
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
..
],
alias: {
...
// 2. 定義別名和插件位置
'jquery': 'jquery'
}
},
plugins: [
// 3. 配置全局使用 jquery
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
]
}
手動載入
手動下載jQuery 放在static 目錄下，如：static/js/jquery.min.js
alias: {
...
// 2. 定義別名和插件位置
"jquery": path.resolve(__dirname, '../static/js/jquery.min.js')
},
plugins: [
// 3. 配置全局使用 jquery
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
]
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
在之前的前端開發(fā)中，為了實現(xiàn)我們的需求，通常采用的方案是通過 JS/Jquery 直接操縱頁面的 DOM 元素，得益于 Jquery 對于 DOM 元素優(yōu)異的操作能力，我們可以很輕易的對獲取到的 DOM 元素進行操作。這篇文章主要介紹了Vue 中 ref 的使用 ,需要的朋友可以參考下2019-04-04
在實際項目開發(fā)過程中，如果公共數(shù)據比較多我們會使用vuex做公共狀態(tài)管理，但是在對瀏覽器進行刷新操作的時候，會導致vuex內的數(shù)據丟失，這種情況有些時候是沒問題的，但是有的時候我們需要某些數(shù)據可以持久化的保存，這樣就需要做對應的處理2023-01-01
基于Vue+ELement搭建動態(tài)樹與數(shù)據表格實現(xiàn)分頁模糊查詢實戰(zhàn)全過程
這篇文章主要給大家介紹了關于如何基于Vue+ELement搭建動態(tài)樹與數(shù)據表格實現(xiàn)分頁模糊查詢的相關資料,Vue Element UI提供了el-pagination組件來實現(xiàn)表格數(shù)據的分頁功能,需要的朋友可以參考下2023-10-10
下面小編就為大家分享一篇vue父組件點擊觸發(fā)子組件事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue實現(xiàn)單行刪除與批量刪除，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+element-plus上傳圖片及回顯問題及數(shù)量限制
本文主要介紹了vue+element-plus上傳圖片及回顯問題及數(shù)量限制，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要為大家介紹了功能強大的vue.js拖拽組件安裝應用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue中解決微信html5原生ios虛擬鍵返回不刷新問題,本文給大家分享解決方法，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了vue實現(xiàn)密碼顯示隱藏切換功能,需要的朋友可以參考下2018-02-02
這篇文章，我們通過實現(xiàn)一個簡單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。對Vue.js中的computed工作原理感興趣的朋友跟隨腳本之家小編一起學習吧2018-03-03