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電腦。
有時候只要想到要用的 vue.js 的時候就會慣性的想起用vue-cli手腳架搭建一個項目,但是有時候的業(yè)務場景并不適合用vue-cli手腳架,這個時候使用vue+jquery混合使用,把他們的優(yōu)點結(jié)合起來使用會大大提升開發(fā)效率。
vue項目使用jquery的方法
1、安裝jquery。
進入項目根目錄下運行:npm install jquery --save
項目的package.json會自動添加依賴信息
2、webpack配置
找到項目的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、找到項目的main.js,添加以下代碼:import 'jquery'
這樣使用npm run dev
重新運行項目
測試,親測成功
<el-row id="form">.... jqueryTest(){ console.log($("form")) }