快捷導(dǎo)航

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中方法經(jīng)過親測，不會報錯，但是VUE文件中的JS也不會執(zhí)行，不可行；

下面的方法經(jīng)過親測，完全可行；

通過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"
  })
 ]

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

深入淺析Vue 中 ref 的使用
在之前的前端開發(fā)中，為了實現(xiàn)我們的需求，通常采用的方案是通過 JS/Jquery 直接操縱頁面的 DOM 元素，得益于 Jquery 對于 DOM 元素優(yōu)異的操作能力，我們可以很輕易的對獲取到的 DOM 元素進行操作。這篇文章主要介紹了Vue 中 ref 的使用 ,需要的朋友可以參考下
2019-04-04
Vuex模塊化與持久化深入講解
在實際項目開發(fā)過程中，如果公共數(shù)據(jù)比較多我們會使用vuex做公共狀態(tài)管理，但是在對瀏覽器進行刷新操作的時候，會導(dǎo)致vuex內(nèi)的數(shù)據(jù)丟失，這種情況有些時候是沒問題的，但是有的時候我們需要某些數(shù)據(jù)可以持久化的保存，這樣就需要做對應(yīng)的處理
2023-01-01
基于Vue+ELement搭建動態(tài)樹與數(shù)據(jù)表格實現(xiàn)分頁模糊查詢實戰(zhàn)全過程
這篇文章主要給大家介紹了關(guān)于如何基于Vue+ELement搭建動態(tài)樹與數(shù)據(jù)表格實現(xiàn)分頁模糊查詢的相關(guān)資料,Vue Element UI提供了el-pagination組件來實現(xiàn)表格數(shù)據(jù)的分頁功能,需要的朋友可以參考下
2023-10-10
vue父組件點擊觸發(fā)子組件事件的實例講解
下面小編就為大家分享一篇vue父組件點擊觸發(fā)子組件事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue實現(xiàn)單行刪除與批量刪除
這篇文章主要介紹了Vue實現(xiàn)單行刪除與批量刪除，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue+element-plus上傳圖片及回顯問題及數(shù)量限制
本文主要介紹了vue+element-plus上傳圖片及回顯問題及數(shù)量限制，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
功能強大的vue.js拖拽組件安裝應(yīng)用
這篇文章主要為大家介紹了功能強大的vue.js拖拽組件安裝應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
vue中解決微信html5原生ios虛擬鍵返回不刷新問題
這篇文章主要介紹了vue中解決微信html5原生ios虛擬鍵返回不刷新問題,本文給大家分享解決方法，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
vue實現(xiàn)密碼顯示隱藏切換功能
這篇文章主要介紹了vue實現(xiàn)密碼顯示隱藏切換功能,需要的朋友可以參考下
2018-02-02
Vue.js中的computed工作原理
這篇文章，我們通過實現(xiàn)一個簡單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。對Vue.js中的computed工作原理感興趣的朋友跟隨腳本之家小編一起學習吧
2018-03-03