vue-cli安裝的vue項目中引用jquery

1. 安裝jquery

　　npm install jquery --save

2. 或是在package.json指定jq版本號后，運行npm install命令，安裝指定版本的jquery

  "dependencies": {
    "core-js": "^3.3.2",
    "jquery": "^3.4.1",
    "qrcodejs2": "0.0.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1"
  },

3. 根目錄下新建vue.config.js，並配置

const webpack = require('webpack');

module.exports = {
    configureWebpack: {//引入jquery
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ]
    },
    
}

這樣，便可在vue項目中使用jquery了。

說到這里也順便提一下，我們設置代理也是在vue.config.js中添加的，代碼如下

const webpack = require('webpack');

module.exports = {
    configureWebpack: {//引入jquery
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ]
    },
    devServer: {
        port: 8089,
        proxy: "http://localhost:8080",
        // proxy:{
        //   '/': {
        //     target: 'http://localhost:8080/',
        //     changeOrigin: true,
        //     pathRewrite: {}
        //   },
        // }
    },
}