vue怎么正确引入jquery vue2.0怎么引入jquery
\u5982\u4f55\u5728vue\u91cc\u9762\u6b63\u786e\u7684\u5f15\u7528 jquery \u548c \u7b2c\u4e09\u65b9\u63d2\u4ef61\u3001\u9996\u5148\u5728package.json\u91cc\u52a0\u5165\uff0c
dependencies:{
"jquery" : "^2.2.3"
}
\u7136\u540e nmp install
2\u3001\u5728webpack.base.conf.js\u91cc\u52a0\u5165
var webpack = require("webpack")
3\u3001\u5728module.exports\u7684\u6700\u540e\u52a0\u5165
\u590d\u5236\u4ee3\u7801
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
\u590d\u5236\u4ee3\u7801
4\u3001\u7136\u540e\u4e00\u5b9a\u8981\u91cd\u65b0 run dev\u3002
5\u3001\u5728\u9700\u8981\u4f7f\u7528\u7684\u5730\u65b9 \u5f15\u5165\u5c31ok\u4e86
import $ from 'jquery'
vue-cli\u5f15\u5165\u5916\u90e8\u6587\u4ef6\uff08\u81ea\u5df1\u4e0b\u8f7d\u597d\u7684\u7b2c\u4e09\u65b9\u7684\u63d2\u4ef6\uff09
\u5728 webpack.base.conf.js \u4e2d\u6dfb\u52a0externals
externals \u4e2d swiper \u662f\u952e\uff0c\u5bf9\u5e94\u7684\u503c\u4e00\u5b9a\u7684\u662f\u63d2\u4ef6 swiper.js \u6240\u5b9a\u4e49\u7684\u53d8\u91cf Swiper :\u3001
\u4e4b\u540e\u518d\u5728\u6839\u76ee\u5f55\u4e0b\u7684index.html\u6587\u4ef6\u91cc\u5f15\u5165\u6587\u4ef6\uff1a
\u8fd9\u6837\u5b50\u5c31\u53ef\u4ee5\u5728\u9700\u8981\u7528\u5230swiper.js\u7684\u6587\u4ef6\u91cc\u52a0\u5165\u8fd9\u884c\u4ee3\u7801\uff1aimport Swiper from 'swiper'\uff0c\u8fd9\u6837\u5c31\u80fd\u6b63\u5e38\u4f7f\u7528\u4e86\u3002
\u76f4\u63a5\u5f15\u5165\u5c31\u53ef\u4ee5\u4e86
\u8fd9\u4e2a\u95ee\u9898\uff1a
\u4f60\u8bd5\u4e00\u4e0b\u4e0d\u5c31\u77e5\u9053\u4e86\u5417\uff1f
1：因为已经安装了vue脚手架，所以需要在webpack中全局引入jquery
打开package.json文件，在里面加入这行代码，jquery后面的是版本，根据你自己需求更改。
dependencies:{
"jquery":"^2.2.3"
}
然后在命令行中cnpm install
大多人应该都是使用的淘宝镜像，所以使用cnpm，如果你不是 ，可以使用npm安装。
2：在webpack.base.conf.js中加入一行代码
var webpack=require("webpack")
3：在webpack.base.conf.js中module.exports的最后加入这行代码，
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
4：在main.js中引入,加入下面这行代码
import $ from 'jquery'
5：最后一步，重新跑一边就好，cnpm run dev
绛旓細1锛氬洜涓哄凡缁忓畨瑁呬簡vue鑴氭墜鏋讹紝鎵浠ラ渶瑕佸湪webpack涓叏灞寮曞叆jquery 鎵撳紑package.json鏂囦欢锛屽湪閲岄潰鍔犲叆杩欒浠ｇ爜锛宩query鍚庨潰鐨勬槸鐗堟湰锛屾牴鎹綘鑷繁闇姹傛洿鏀广俤ependencies:{ "jquery":"^2.2.3"} 鐒跺悗鍦ㄥ懡浠よ涓璫npm install 澶у浜哄簲璇ラ兘鏄娇鐢ㄧ殑娣樺疂闀滃儚锛屾墍浠ヤ娇鐢╟npm锛屽鏋滀綘涓嶆槸 锛屽彲浠ヤ娇鐢╪pm瀹夎銆2...
绛旓細鏂规硶濡備笅锛1.棣栭夐氳繃npm瀹夎jquery npm install jquery --save2.鍦╞uild/webpack.base.conf鏂囦欢褰撲腑寮曞叆jquerymodule.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'jquery': path.resolve...
绛旓細vue寮曞叆js鏂囦欢鐨勬柟娉曟湁涓夌鍒嗗埆鏄細鍦╲ue-cli webpack鍏ㄥ眬涓紩鍏query锛岄氳繃vue缁勪欢鏉ュ紩鍏s鏂囦欢锛岄氳繃鍗晇ue椤甸潰寮曠敤鍐呴儴js鏂囦欢銆傘愭帹鑽愯绋嬶細Vue鏁欑▼銆1銆乿ue-cli webpack鍏ㄥ眬寮曞叆jquery(1) 棣栧厛 npm install jquery --save (--save 鐨勬剰鎬濇槸灏嗘ā鍧楀畨瑁呭埌椤圭洰鐩綍涓嬶紝骞跺湪package鏂囦欢鐨刣ependencies鑺傜偣...
绛旓細1锛歯pm install jquery 2锛氬湪build鏂囦欢澶逛笅鐨剋ebpack.base.conf.js杩涜閰嶇疆 锛1锛塩onst webpack = require("webpack") 锛2锛夊湪module.exports閲岄潰鍔犲叆 plugins: [ &...
绛旓細椤甸潰鎬庝箞寮曞叆vue.js鏂囦欢鐨勫氨鎬庝箞寮曞叆jquery鍦╲ue椤圭洰閲姝ｇ‘鍦寮曠敤jquery鍜宩query-ui鐨勬彃浠秜ue-cliwebpack鍏ㄥ眬寮曞叆jquery棣栧厛鍦╬ackage.json閲屽姞鍏ワ紝dependencies:{"jquery":"^2.2.3"}
绛旓細鏂规硶涓锛氬叏灞寮曞叆锛屼篃鏄渶鏆村姏鐨勶紝浣嗘槸涔熸槸鏈夊ソ澶勫潖澶勶紙鍚屾椂鍔犺浇锛屼絾鏄笉鑳戒繚璇佸悓鏃朵笅杞斤級12缁勪欢涓彲浠ョ洿鎺ヤ娇鐢ㄧ殑swiper浜 _initSwiper() { const container = this.$refs.swiper; const config = { effect: 'coverflow', slidesPerView: 'auto', centeredSlides: true, initialSlide...
绛旓細璇曡瘯 import $ from 'jquery'window.$ = 锛
绛旓細JQuery 涓 VueJS 鐩镐簰閰嶅悎鍙互闈炲父楂樻晥鐨勫畬鎴愬紓姝ヤ换鍔★紝棣栧厛閫氳繃 JQuery 鍙戝嚭 Ajax 璇锋眰锛屾帴鍙楀埌鏈嶅姟绔紶閫掔殑 JSON 鏁版嵁鍚庯紝鍐嶉氳繃 Vue 灏嗘暟鎹粦瀹氬埌缁勪欢涓婏紝鏈鍚庣敱 JQuery 杩涜鍔ㄧ敾澶勭悊锛屾暣涓繃绋嬪氨濡傝浜戞祦姘磋埇鑷劧銆傝鍙ラ澶栬瘽锛孷ue 鐨勭洰鐨勪笉鏄彇浠 JQuery锛屽畠鏄负浜嗚В鍐冲墠鍚庣鍒嗙鑰屽嚭鐜扮殑銆傚鏋滄病鏈...
绛旓細鍙互,涓鑸湪vue鐨勯」鐩噷闈㈠姞鍏ヤ簡鍏朵粬js浠涔堢殑闇瑕佺敤window.鍑烘潵,姣斿鎴寮曞叆浜唋ayer.js,鍦ㄤ娇鐢╨ayer鐨勬椂鍊欓渶瑕佸湪vue鐨剆cript閮ㄥ垎鐢╳indow.layer杩欐牱璋冪敤,鑰jquery鍙互鐩存帴$杩欐牱鐢
绛旓細Vue.js鍒楄〃娓叉煋缁戝畾jQuery鎻掍欢鐨姝ｇ‘濮垮娍 浣跨敤v-for缁戝畾鍒楄〃鏃讹紝鏈夋椂鍊欓渶瑕佺粦瀹氬select2涔嬬被鐨刯Query鎻掍欢銆傞渶瑕佸湪Vue鏍规嵁鏁扮粍鍐呭鐢熸垚dom鍏冪礌涔嬪悗锛屽幓鎵惧埌璇om鍏冪礌锛岀劧鍚 $().xxx缁戝畾jQuery鎻掍欢銆備箣鍓嶄娇鐢╒ue.nextTick鏂规硶锛屽湪涓娆om鏇存柊浠ュ悗鎵ц寤惰繜鍥炶皟锛屾覆鏌搄Query鎻掍欢銆傜劧鑰岃繖骞朵笉鏄竴绉嶅緢濂界殑鏂瑰紡锛屾湁...
