メンテナンスモード入りしたVue CLIを、今学ぶ意味はあるのか

はじめに

Vue.jsのプロジェクトを新しく始めようとして、まず何で調べますか。書籍やちょっと古めの記事を読むと、必ずと言っていいほど出てくるのがVue CLIです。vue create my-appと打つだけでプロジェクトが立ち上がる、あの体験を覚えている方も多いはずです。

ただし2026年現在、事情が変わっています。Vue CLIは公式にメンテナンスモード入りが宣言されており、新規機能の追加は行われていません。新規プロジェクトではcreate-vueによるVite構成が公式推奨です。

とはいえ、既存プロジェクトの保守やレガシー案件の引き継ぎでは、まだまだVue CLIと向き合う機会があります。この記事では、Vue CLIの基本的な使い方から、プラグインの仕組み、そしてVueへどう向き合うべきかまで整理していきます。

Vue CLIとは

Vue CLIは、Vue.jsの公式チームが開発しているプロジェクトスキャフォールディングツールです。対話式のプロンプトに答えるだけでWebpackベースの開発環境が構築され、Babel、TypeScript、Vue Router、Vuex（Pinia以前の状態管理）、ESLintといった構成要素をあとから柔軟に追加できます。

GitHubリポジトリはvuejs/vue-cliとして公開されており、npmパッケージ名は@vue/cliです。以前はvue-cliという名前のパッケージ（Vue CLI 2系）も存在しましたが、現在の3系以降はスコープ付きの@vue/cliに統合されています。

主な特徴

ゼロコンフィグでのスタート - Webpackの設定を書かなくても、vue createだけで動くプロジェクトが手に入る
プラグインシステム - vue add routerのように後からプラグインを追加でき、必要な機能だけを積み増していける
GUIツール（vue ui） - コマンドラインが苦手でも、ブラウザ上のグラフィカルな画面でプラグイン管理やビルド実行ができる
vue.config.jsによるカスタマイズ - 内部で使っているWebpack設定を、必要な分だけ上書きできる
Vue 2 / Vue 3両対応 - プリセット選択時にどちらのバージョンを使うか選べる

インストール

Vue CLIはグローバルインストールして使うのが一般的です。

# npm
npm install -g @vue/cli

# yarn
yarn global add @vue/cli

# pnpm
pnpm add -g @vue/cli

インストールが終わったら、バージョンを確認しておきましょう。

vue --version
# @vue/cli 5.0.9

執筆時点の最新版は5.0.9です。Node.jsは12以上（推奨は14以上）が必要になります。

基本的な使い方

プロジェクトの作成

vue createにプロジェクト名を渡すと、対話形式でプリセットを選べます。

vue create my-app

実行するとこのような質問が続きます。

? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features

「Manually select features」を選ぶと、TypeScript、Router、Vuex、CSS Pre-processors、Linter、Unit Testingなどを個別にチェックして組み合わせられます。作成が終わると、次のようなディレクトリ構成が生成されます。

my-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
└── vue.config.js

生成されたpackage.jsonには、開発サーバーの起動・本番ビルド・Lintのスクリプトが揃っています。

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

npm run serve   # 開発サーバーを起動（ホットリロード付き）
npm run build   # 本番用にビルド
npm run lint    # ESLintでコードチェック

内部で動いているのはvue-cli-serviceというコマンドで、これがWebpackの設定を組み立ててdev serverやビルドを実行しています。

GUIでの操作

コマンドを覚えるのが面倒なら、vue uiでブラウザベースの管理画面を開けます。

vue ui

プロジェクトの作成、プラグインの追加・削除、依存関係のアップデート、ビルドの実行までをGUI上から行えます。

実践的なユースケース

Vue CLIの実務での使い方は、プロジェクトを新規に作る場面だけではありません。既存プロジェクトへの機能追加や設定のカスタマイズなど、いくつかパターンに分けて見ていきます。

既存プロジェクトへのプラグイン追加

すでに動いているVue CLIプロジェクトに、あとからRouterやTypeScriptを足したくなることはよくあります。そんなときはvue addコマンドを使います。

# Vue Routerを追加
vue add router

# Vuexを追加
vue add vuex

# TypeScriptサポートを追加
vue add typescript

# ESLint + Prettierの構成を追加
vue add eslint

vue addは単にパッケージをインストールするだけでなく、src/router/index.jsのようなボイラープレートファイルの生成や、main.jsへの配線の差し込みまで自動でやってくれます。手作業でRouterを組み込むより手戻りが少ないのが利点です。

`vue.config.js`によるビルド設定のカスタマイズ

内部で使われているWebpackの設定に手を入れたいケースも多いです。プロキシ設定やエイリアス、出力ディレクトリの変更などはvue.config.jsから行います。

const path = require('path')

module.exports = {
  outputDir: 'dist',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@components': path.resolve(__dirname, 'src/components'),
      },
    },
  },
}

devServer.proxyを設定しておくと、開発中のAPIリクエストをバックエンドサーバーに転送でき、CORSの問題を回避しながらフロントエンドとバックエンドを別々に動かせます。configureWebpackはWebpack設定をマージする形で拡張するための入り口で、chainWebpackを使えばより細かい単位で設定を変更することも可能です。

独自プラグインの作成

社内で共通利用するESLintルールやコンポーネントテンプレートを配りたい場合、独自のvue-cli-plugin-*を作ることもできます。

// vue-cli-plugin-my-plugin/index.js
module.exports = (api, options) => {
  api.chainWebpack((webpackConfig) => {
    webpackConfig.resolve.alias.set('@shared', api.resolve('src/shared'))
  })

  api.extendPackage({
    scripts: {
      'lint:fix': 'vue-cli-service lint --fix',
    },
  })
}

api.chainWebpackでWebpack設定を追記したり、api.extendPackageでpackage.jsonにスクリプトやdependenciesを追加したりできます。社内標準の構成をチーム全員に一発で配布したい、といった場面で活躍します。

Vue CLIからViteへの移行

冒頭で触れたとおり、Vue CLIは現在メンテナンスモードです。既存プロジェクトを長く保守するなら、いずれcreate-vueによるVite構成への移行を検討することになります。

# 新規プロジェクトはcreate-vueでVite構成にする
npm create vue@latest

移行の勘所は、vue.config.jsのWebpack設定をvite.config.jsのVite設定に書き換えること、process.env.VUE_APP_*という環境変数の命名規則をimport.meta.env.VITE_*に置き換えることの2点が中心になります。段階的に移行したい場合は、既存のVue CLIプロジェクトを動かしたまま、新規機能だけVite製の別プロジェクトで検証するというやり方も現実的です。