vuecli 3.0グローバル導入jquery


以前はjqueryを使用していたが、各コンポーネントが導入された.
import $ from 'jquery'

この方法はjqueryを使用するコンポーネントごとに導入する必要があります.面倒ですが、グローバル導入の方法を共有します.
1.jqueryのダウンロード
npm install jquery

2.vue.configureWebpack jqueryプラグインの追加
vuecli 3で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を使用することができます.