使用vue腳手架的項目如何引入JQuery第三方插件

1：下載jquery

npm install jquery --save

2：打開build文件夾下的webpack.base.conf.js文件：

1）在最上方 引入webpack

 var webpack=require('webpack')

 2）在module.exports里 配置JQuery插件：

        plugins: [ 
           new webpack.ProvidePlugin({ 
                 $:"jquery", 
                 jQuery:"jquery", 
                "windows.jQuery":"jquery"
        }) 
      ], 

3：在入口文件main.js中輸入

import $ from 'jquery'

4、測試使用

 

 最后，要補充一點：

之前的測試例子失敗了，是因為我把代碼沒有寫到 $(); 里面，具體原因再來回顧一下下~~

通俗的來講，$(function(){})里是加載完成才運行 (一進頁面就加載)　寫在外面邊加載邊運行(一般是全局變量）

補充：

1、$(function(){...}); 的完整寫法是 $(document).ready(function(){...});

作用是保證DOM（瀏覽器對象模型）結構渲染完成后代碼再執行，避免DOM結構未完成，找不到元素的錯誤。另外一個作用是當成立即執行匿名函數使用，避免引入全局變量(function(){ ... })()。

var a=1; //定義一個全局變量
(function(){ 
    var b=2;//定義一個局部變量
    alert(b);//輸出2
})()

alert(a);//輸出1
alert(b);//報錯，b未定義，Uncaught ReferenceError: b is not defined

 

感謝https://zhidao.baidu.com/question/391884710628993645.html~