Vue-cli3.X环境下配置jQuery和使用的方式

第一步:

         npm install jquery –save

        下载jQuery包

第二步:

        在vue.config.js里面配置jQuery

        
// 先引入webpack
const webpack =require("webpack");
module.exports = {
// 再 配置 plugins
  configureWebpack: {
   plugins:[
     
       new webpack.ProvidePlugin({
           jQuery: "jquery",
           jquery:"jquery",
           $: "jquery",
           "window.jQuery":"jquery"
       })
    ]
  }
};

第三步:

        在main.js里面

import $ from 'jquery'; //引入jQuery 模块

第四步:代码中使用:

    想要在哪个vue文件里面用就在哪个vue文件中

   import $ from "jquery";

使用示例:

watch:{
            Show:{
                handler(newVal,oldVal){
                    if(this.Show.show){
                        $("#dialog").show();
                        $("#box").show().animate({
                            top:"80px",
                            opacity:1
                        },300)
                    }else{
                        $("#box").show().animate({
                            top:0,
                            opacity:0
                        },300,function () {
                            $("#dialog").hide();
                        })
                    }
                },
                deep:true
            }
        },