HTML5テクニカルノート

Vue CLI 3入門 01: Vue CLIとは

ID: FN1807001
Technique: HTML5 / ECMAScript 2015
Tool: Vue CLI 3.0.0-rc.9

Vue CLIは、Vue.jsでアプリケーションをつくるための、コマンドラインインタフェース(CLI)にもとづく開発ツールです(図001)。2018年7月29日にv3.0.0-rc.9が公開されました。本稿では、Vue CLIの機能とシステムの構成要素について簡単にご説明します。

図001■Vue CLI 3サイト

01 Vus CLIの機能

Vue CLIは、 Vue.jsの開発を手早く進めるためのシステムです。つぎのような機能が備わっています。

インタラクティブなプロジェクトのひな型作成 - @vue/cli
設定なしに即使えるプロトタイプ作成 - @vue/cli + @vue/cli-service-global
実行時の依存設定 - @vue/cli-service
- アップグレード可能
- webpackにもとづく実践的なデフォルト設定
- プロジェクトごとの設定ファイル
- プラグインによる拡張可能
豊富な公式プラグインによりフロントエンドエコシステムに最適なツールを統合
グラフィカルユーザーインタフェース(GUI)でVue.jsプロジェクトの作成と管理

Vue CLIが目指すのは、Vueエコシステムを支える標準ツールです。さまざまなビルドツールを適切なデフォルトのもとで円滑に統合し、設定にわずらわされずに、すぐにアプリケーションがつくりはじめられます。また、ツールの起動・終了を繰り返すことなく、設定が柔軟に調整できます。

02 システムの構成要素

Vue CLIはいくつかの要素から成り立っています。ソースコードを見れば、個別にパブリッシュされたパッケージをまとめたMonorepoであることがわかるでしょう(「Monorepoについて」参照)。

02-01 CLI

CLI(@vue/cli)は、グローバルにインストールされるnpmパッケージです。ターミナルからたとえばつぎのようなvueコマンドが使えるようになります。

vue create: 新しいプロジェクトのひな型を素早くつくります。
vue serve: vueファイルから簡単にプロトタイプをつくります。
vue ui: プロジェクトをGUI(グラフィカルユーザーインタフェース)で管理できます。

02-02 CLIサービス

CLIサービス(@vue/cli-service)は開発依存です。npmのパッケージで、@vue/cliがつくるプロジェクトごとにローカルにインストールされるのです。そして、webpackとwebpack-dev-serverにもとづいて、つぎのような中身で構築されます。

他のCLIプラグインを読み込むコアのサービス
多くのアプリケーションに最適化された内部的なwebpack設定
プロジェクト内のvue-cli-serviceバイナリ
- serveとbuildおよびinspectなど基本的コマンドが含まれます。

create-react-appをご存知でしたら、@vue/cli-serviceはreact-scriptsとほぼ同じ役割です。ただし、備える機能は異なります。詳しくは「CLI Service」をお読みください。

02-03 CLIプラグイン

CLIプラグインはnpmパッケージで、Vue CLIプロジェクトにつぎのようなオプションの機能を加えます。

Babel/TypeScriptトランスパイル
ESLintの統合
ユニットテスト
エンドツーエンドテスト

Vue CLIプラグインの名前は、ビルトインが@vue/cli-plugin-、コミュニティのものはvue-cli-plugin-ではじまりますので見つけやすいでしょう。vue-cli-serviceバイナリをプロジェクトで実行すると、package.jsonにリストされたプラグインがすべて自動的に解決されて読み込まれます。プラグインはプロジェクトをつくるときに含められますし、あとから加えても構いません。再利用するプリセットにグループ化することもできます。詳しくは「Plugins and Presets」をお読みください。

Vue CLIについてさらに詳しくは、Vue.jsコアチームのkazupon氏によるスライド「Vue CLI v3」をご覧ください。

Vue CLI 3入門

作成者: 野中文雄
更新日: 2018年7月29日本文の若干の修正。
作成日: 2018年7月15日