Vue CLI のコマンド操作

このページは、Vue CLI のコマンド操作をまとめる予定のページです。

目次

注意

  • このページを作ったひとが備忘のためにまとめているため網羅性はありません。
  • バージョン 4.2.2 時点の内容です。将来のバージョンで仕様が変更されている場合は使用できない可能性があります。

一覧

インストール

npm
npm install -g @vue/cli
yarn
yarn global add @vue/cli

プロジェクトの生成

現在地にプロジェクトを生成する
vue create .
「foo」フォルダを作ってプロジェクトを生成する
vue create foo

プロジェクトの実行

npm
npm run serve
yarn
yarn serve

プラグインの追加

Vue Router
vue add vue-router
Vuetify
vue add vuetify

UI 管理画面の起動

vue ui

参考: vue コマンドのオプション (意訳)

使い方: vue <コマンド> [options]

オプション:
  -V, --version                              バージョン番号を出力します
  -h, --help                                 使い方の情報を出力します

コマンド:
  create [options] <app-name>                vue-cli-service で新しいプロジェクトを生成します
  add [options] <plugin> [pluginOptions]     作成済みのプロジェクトでプラグインのインストールとそのジェネレーターの呼び出しを行います
  invoke [options] <plugin> [pluginOptions]  作成済のプロジェクトでプラグインのジェネレーターを呼び出します
  inspect [options] [paths...]               vue-cli-service でプロジェクトの webpack 設定を検査します
  serve [options] [entry]                    設定なしで、開発モードで .js または .vue ファイルを提供 (※サーバー起動) します
  build [options] [entry]                    設定なしで、本番モードで .js または .vue ファイルをビルドします
  ui [options]                               vue-cli ui を起動し、開きます
  init [options] <template> <app-name>       リモートテンプレートからプロジェクトを生成します (古い API で、@vue/cli-init が必要です)
  config [options] [value]                   設定の変更と検査を行います
  outdated [options]                         (実験的) 古い vue cli サービス / プラグインをチェックします
  upgrade [options] [plugin-name]            (実験的) vue cli サービス / プラグインをアップグレードします
  migrate [options] [plugin-name]            (実験的) すでにインストールされている cli プラグインの移行ツールを実行します
  info                                       環境に関するデバッグ情報を出力します

  特定のコマンドに関する詳細な使用方法は vue <command> --help を実行します。