jq和vuejs是否可以結(jié)合使用

這篇文章主要介紹jq和vuejs是否可以結(jié)合使用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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è)務(wù)場景并不適合用vue-cli手腳架，這個時候使用vue+jquery混合使用，把他們的優(yōu)點結(jié)合起來使用會大大提升開發(fā)效率。

vue項目使用jquery的方法

1、安裝jquery。

進(jìn)入項目根目錄下運行：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"))
}

以上是“jq和vuejs是否可以結(jié)合使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！