Vue-cli（Vue脚手架）中引入jQuery （快来吐槽）

需求：在Vue项目中使用JQuery

安装成功后 jQuery(两种方法)

1. 下载npm包

   npm install jquery –save
   

2. 在vue ui的可视化页面中下载 jquery

   

3. 安装成功后 package.json显示：

创建 vue.config.js文件

在根目录下创建vue.config.js文件 并配置

1. 在最上面定义 var webpack = require('webpack')

const webpack = require('webpack')
 
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ]
    }
}

2.其他配置 (框内新增是支持JQuery的配置)

在main.js（入口文件) 引入

• 框出来的都是新增的

import $ from 'jquery'  //导入jquery
Vue.prototype.$ = $   //将$(jquery)挂在到vue.prototype身上，让所有的Vue共享这个方法

测试

--- 方法一
在 $ ( funtion() {

​ 在这里写 jquery 代码

} )

<script>
export default {}

$(function () { //这里面写jQuery代码
  console.log('引入成功')
})
</script>

--- 方法二

methods:{
        mpanel2(){
            $('#mpanel2').codeVerify({
                type : 1,  //类型
                width : '1000px',
                height : '50px',
                fontSize : '16px',
                codeLength : 6,  //验证码的个数
                btnId : 'check-btn',
                ready : function() {
                },
                success : function() {
                    alert('验证匹配！');
                },
                error : function() {
                    alert('验证码不匹配！');
                }
            });
        }
    },
    mounted(){
        this.mpanel2()
    }

\

「点赞、收藏和评论」

❤️关注+点赞+收藏+评论+转发❤️，鼓励笔者创作更好的文章，谢谢🙏大家。