jq和vuejs可以混用嗎

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

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

有時候只要想到要用的vue.js 的時候就會慣性的想起用vue-cli手腳架搭建一個項目，但是有時候的業務場景並不適合用vue-cli手腳架，這個時候使用vue jquery混合使用，把他們的優點結合起來使用會大大提升開發效率。

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"))
}

相關推薦：《vue.js教學》

以上是jq和vuejs可以混用嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！