vuecli3.0全局引入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了。。

你可能感兴趣的:(Vue.js入门实战)