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


第一步:安裝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引入測試'); });
版權聲明:本文為博主原創文章,未經博主允許不得轉載。 https://blog.csdn.net/sinat_19327991/article/details/78148930


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM