jquery在vue腳手架中的使用方式示例
更新時(shí)間：2017年08月29日 09:28:22 作者：weixin_38788947
本篇文章主要介紹了jquery在vue腳手架中的使用方式示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
本文介紹了jquery在vue腳手架中的使用方式示例，分享給大家，具體如下：
1：在各個(gè)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>
這種方式不會(huì)影響原來(lái)VUE文件中的$的使用，完全可行；但是需要每個(gè)vue文件都引入一遍；
2：在入口文件app.vue中整體引入，不會(huì)報(bào)錯(cuò)
3：在main.js中整體引入，
4：在index.html中整體引入
以上3中方法經(jīng)過(guò)親測(cè)，不會(huì)報(bào)錯(cuò)，但是VUE文件中的JS也不會(huì)執(zhí)行，不可行；
下面的方法經(jīng)過(guò)親測(cè)，完全可行；
通過(guò)npm安裝依賴引入
1：通過(guò)npm安裝依賴引入
npm install jquery -S
2：修改webpack配置文件
build/webpack.base.conf.js
...
var webpack = require("webpack") // 1. 確保引入 webpack，后面會(huì)用到
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"
})
]
}
手動(dòng)載入
手動(dòng)下載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"
})
]
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式
- Vue中正確使用jQuery的方法
- vue單頁(yè)應(yīng)用中如何使用jquery的方法示例
- 使用vue與jquery實(shí)時(shí)監(jiān)聽(tīng)用戶輸入狀態(tài)的操作代碼
- 詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫(xiě)css
- 如何將 jQuery 從你的 Bootstrap 項(xiàng)目中移除(取而代之使用Vue.js)
- Vue CLI3.0中使用jQuery和Bootstrap的方法
- 在vue項(xiàng)目中使用Jquery-contextmenu插件的步驟講解
- Vue項(xiàng)目中使用jquery的簡(jiǎn)單方法
相關(guān)文章
VUE+Element UI實(shí)現(xiàn)簡(jiǎn)單的表格行內(nèi)編輯效果的示例的代碼
這篇文章主要介紹了VUE+Element UI實(shí)現(xiàn)簡(jiǎn)單的表格行內(nèi)編輯效果的示例的代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要介紹了如何設(shè)置Vue全局公共方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)堆疊柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了vue過(guò)濾器在v2.0版本用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Tree shaking 是一種通過(guò)清除多余代碼方式來(lái)優(yōu)化項(xiàng)目打包體積的技術(shù),就是在保持代碼運(yùn)行結(jié)果不變的前提下,去除無(wú)用的代碼,本文給大家介紹Vue 3.0中Treeshaking特性是什么,感興趣的朋友一起看看吧2023-10-10
vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式
這篇文章主要介紹了vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue常用的全選/反選的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了Vue之綁定class樣式與style樣式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
關(guān)于net?6+vue?插件axios?后端接收參數(shù)問(wèn)題
接到這樣一個(gè)項(xiàng)目需求是這樣的，前端vue?必須對(duì)象傳遞后端也必須對(duì)象接收，接下來(lái)通過(guò)本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問(wèn)題,需要的朋友可以參考下2022-01-01
ElementUI多個(gè)子組件表單的校驗(yàn)管理實(shí)現(xiàn)
這篇文章主要介紹了ElementUI多個(gè)子組件表單實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11