首页 > 其他 > 详细

Vue2.0 --- vue-cli脚手架中全局引入JQ

时间:2019-09-19 20:24:01      阅读:155      评论:0      收藏:0      [点我收藏+]

第一步:安装jQuery

npm/cmpn方式安装(默认安装1.7.X版本的JQ)

npm/cnpm install jQuery

如果想安装更高版本的JQ那么可以选择在package.json文件下面这个位置添加代码断(当前图片安装的是2.2.3版本,如果想安装更高或者其他可以更改版本号)

技术分享图片

然后在命令行窗口中输入指令,即可完成安装

npm install

第二步:更改webpack.base.conf.js文件

在文件指定位置添加代码

var webpack = require(‘webpack‘);
plugins: [
    new webpack.optimize.CommonsChunkPlugin(‘common.js‘),
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
    })
],

位置如图所示:

技术分享图片

第三步:(必须操作),重启一下服务器不然会报错,重启之后就好了

npm run dev

第四步:更改main.js文件

添加代码

import $ from ‘jquery‘

如图所示: 
技术分享图片

之后在文件中即可随意使用JQ,不过切记不能直接使用,必须这样

$(function(){
    $(‘.button‘).click(function(){
        alert(‘JQ引入测试‘);
    });
});

如果不写$(function(){ }),会无法生效的

错误写法:

$(‘.button‘).click(function(){
    alert(‘JQ引入测试‘);
});
版权声明:本文为博主原创文章,未经博主允许不得转载

Vue2.0 --- vue-cli脚手架中全局引入JQ

原文:https://www.cnblogs.com/sexintercourse/p/11552174.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!