欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery在vue腳手架中的使用方式示例

 更新時間：2017年08月29日 09:28:22   作者：weixin_38788947  
本篇文章主要介紹了jquery在vue腳手架中的使用方式示例，非常具有實(shí)用價值，需要的朋友可以參考下

本文介紹了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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • VUE+Element UI實(shí)現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼

    VUE+Element UI實(shí)現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼

    這篇文章主要介紹了VUE+Element UI實(shí)現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • 如何設(shè)置Vue全局公共方法

    如何設(shè)置Vue全局公共方法

    這篇文章主要介紹了如何設(shè)置Vue全局公共方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • vue+echarts實(shí)現(xiàn)堆疊柱狀圖

    vue+echarts實(shí)現(xiàn)堆疊柱狀圖

    這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)堆疊柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • 詳解vue過濾器在v2.0版本用法

    詳解vue過濾器在v2.0版本用法

    本篇文章主要介紹了vue過濾器在v2.0版本用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • Vue 3.0中Treeshaking特性及作用

    Vue 3.0中Treeshaking特性及作用

    Tree shaking 是一種通過清除多余代碼方式來優(yōu)化項目打包體積的技術(shù),就是在保持代碼運(yùn)行結(jié)果不變的前提下,去除無用的代碼,本文給大家介紹Vue 3.0中Treeshaking特性是什么,感興趣的朋友一起看看吧
    2023-10-10
  • vuex 多模塊時 模塊內(nèi)部的mutation和action的調(diào)用方式

    vuex 多模塊時 模塊內(nèi)部的mutation和action的調(diào)用方式

    這篇文章主要介紹了vuex 多模塊時 模塊內(nèi)部的mutation和action的調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue常用的全選/反選的示例代碼

    Vue常用的全選/反選的示例代碼

    這篇文章主要介紹了Vue常用的全選/反選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • Vue之綁定class樣式與style樣式方式

    Vue之綁定class樣式與style樣式方式

    這篇文章主要介紹了Vue之綁定class樣式與style樣式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • 關(guān)于net?6+vue?插件axios?后端接收參數(shù)問題

    關(guān)于net?6+vue?插件axios?后端接收參數(shù)問題

    接到這樣一個項目需求是這樣的，前端vue?必須對象傳遞后端也必須對象接收，接下來通過本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問題,需要的朋友可以參考下
    2022-01-01
  • ElementUI多個子組件表單的校驗管理實(shí)現(xiàn)

    ElementUI多個子組件表單的校驗管理實(shí)現(xiàn)

    這篇文章主要介紹了ElementUI多個子組件表單實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11

最新評論