jq和vuejs可以混用，方法：1、利用npm工具安裝jquery；2、配置“webpack.base.conf.js”和“module.exports”文件；3、在“main.js”中，用“import 'jquery'”引入jq即可。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

有時(shí)候只要想到要用的 vue.js 的時(shí)候就會(huì)慣性的想起用vue-cli手腳架搭建一個(gè)項(xiàng)目，但是有時(shí)候的業(yè)務(wù)場(chǎng)景并不適合用vue-cli手腳架，這個(gè)時(shí)候使用vue+jquery混合使用，把他們的優(yōu)點(diǎn)結(jié)合起來(lái)使用會(huì)大大提升開(kāi)發(fā)效率。

vue項(xiàng)目使用jquery的方法

1、安裝jquery。

進(jìn)入項(xiàng)目根目錄下運(yùn)行：npm install jquery --save

項(xiàng)目的package.json會(huì)自動(dòng)添加依賴信息

2、webpack配置

找到項(xiàng)目的build目錄中的webpack.base.conf.js文件，引入：var webpack = require('webpack')

然后在module.exports中添加一段代碼，

resolve: { .... }, //添加jquery plugins: [   new webpack.optimize.CommonsChunkPlugin('common.js'),   new webpack.ProvidePlugin({     jQuery: "jquery",     $: "jquery"   }), ], module: {.....

3、找到項(xiàng)目的main.js，添加以下代碼：import 'jquery'

這樣使用npm run dev 重新運(yùn)行項(xiàng)目

測(cè)試，親測(cè)成功

<el-row id="form">.... jqueryTest(){  console.log($("form")) }