vue-cli3项目中引入jquery

最新推荐文章于 2023-07-11 14:31:34 发布

原创最新推荐文章于 2023-07-11 14:31:34 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #vue

VUE 专栏收录该内容

5 篇文章

订阅专栏

本文档详细介绍了如何在Vue项目中安装并配置jQuery的方法。首先通过npm安装jQuery，并将其添加到项目的依赖列表中；接着在vue.config.js文件中进行全局配置；最后演示了在页面上如何使用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、页面使用