vuecli3全局引入jquery

之前使用jquery都是每个组件引入

import $ from 'jquery'

这种方式需要在每个要使用jquery的组件里面引入一下,比较麻烦,分享一下全局引入的方法

1.下载jquery

npm install jquery

2.vue.config.js中webpack配置configureWebpack添加jquery插件

vuecli3中修改webpack配置

const webpack = require("webpack");
module.exports = {
    configureWebpack: {
        //支持jquery
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ]
    },
};

3.package.json中eslint配置项env中添加"jquery":true

eslint配置

"eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jquery": true //此处配置意思为全局引入jquery,详情可查看文档
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

4.最后就可以愉快在项目各个组件中不用import也可以使用jquery了。。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是 webpack 是前端的一个项目构建工具,他是基于 Node.js 开发出来的一个前端工具 如何完美实现上...
    千见阅读 1,525评论 0 0
  • 一、 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组...
    饥人谷_Leonardo阅读 2,056评论 0 18
  • 构建工具逐渐成为前端工程必备的工具,Grunt、Gulp、Fis、Webpack等等,译者有幸使用过Fis、Gul...
    陈坚生阅读 6,097评论 4 64
  • 全局安装webpack 全局安装webpack会有个问题,就是当你有两个项目依赖于不同版本的webpack,就会有...
    説好的妹紙呢阅读 1,913评论 0 11
  • 看着熊熊烈火中噼啪作响的日记本,发黄的纸如狰狞的异形随着北风飘散如花,一字一句随着烈火的舔舐慢慢消逝殆尽,满是心血...
    楚门已锁阅读 204评论 0 1