Can jq and vuejs be mixed?

jq and vuejs can be mixed. Method: 1. Use npm tool to install jquery; 2. Configure "webpack.base.conf.js" and "module.exports" files; 3. In "main.js" , use "import 'jquery'" to introduce jq.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Sometimes when I think about vue.js, I will automatically think of using vue-cli scaffolding to build a project. However, sometimes business scenarios are not suitable for using vue-cli scaffolding. This When using vue jquery mixedly, combining their advantages will greatly improve development efficiency.

How to use jquery in vue project

1. Install jquery.

Enter the project root directory and run: npm install jquery --save

The package.json of the project will automatically add dependency information

2. webpack Configuration

Find the webpack.base.conf.js file in the project's build directory and introduce: var webpack = require('webpack')

Then in module. Add a piece of code in exports,

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

3. Find the main.js of the project and add the following code: import 'jquery'

Use it like thisnpm run dev Re-run the project

test, the personal test was successful

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

Related recommendations: "vue.js Tutorial"

The above is the detailed content of Can jq and vuejs be mixed?. For more information, please follow other related articles on the PHP Chinese website!