vue-cli3項目中引入jquery

1、安裝jquery

npm install jquery --save
           

2、或則在package.json中指定版本号，然後運作npm install指令

"dependencies": {
  "ant-design-vue": "^1.7.4",
  "axios": "^0.21.1",
  "core-js": "^3.6.5",
  "crypto-js": "^4.0.0",
  "echarts": "^5.0.2",
  "iview": "^3.5.4",
  "jquery": "^3.6.0",
  "node-sass": "^4.14.1",
  "view-design": "^4.1.0",
  "vue": "^2.6.11",
  "vue-axios": "^3.2.4",
  "vue-router": "^3.5.1",
  "vuex": "^3.6.2"
},
           

3、在vue.config.js裡面配置全局引用

const webpack = require('webpack');
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    outputDir: "dist",
    css: {
        loaderOptions: {  //向CSS相關的loader傳遞選項
            less: {
                javascriptEnabled: true
            }
        }
    },
    devServer:{
        port:8080,  //端口号
    },
    configureWebpack: {//引入jquery
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            }),
        ]
    },
};
           

4、頁面使用

$("#id")