手順

まず最初にnpm install -g @vue/cli @vue/cli-service-globalをインストールしておく。

このままvue serve <vue file>をやっても、おそらくCannot find module 'babel-eslint'とエラーを吐いてしまう。

babel-eslintパッケージがインストールされてないのは分かる。一方で、ESLintをローカルのままでserveしたい場合が出てこなかった。

ESLintをローカルのままでserveしたい場合、次のようにする。

①最初にnpm i --save-dev eslint babel-eslintでローカルにインストールする。

package.jsonのdevDependenciesに次のとおり記載されていればOK（だと思う）。

// package.json
// `vue create`で最初から導入されているパッケージも含む
"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-typescript": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "typescript": "~3.9.3",
  }

②.eslintrc.jsに次のとおり追記する

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parser: "vue-eslint-parser",  // ←追記
  parserOptions: {
    parser: "@typescript-eslint/parser",  // ←追記
    ecmaVersion: 2020
  },
  ...

③vue serve <vue file>でローカル鯖起動できればOK