サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

Vue CLI 3入門 01: Vue CLIとは


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

図001■Vue CLI 3サイト

図001

01 Vus CLIの機能

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

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

02 システムの構成要素

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

02-01 CLI

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

02-02 CLIサービス

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

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

02-03 CLIプラグイン

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

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日


Copyright © 2001-2018 Fumio Nonaka.  All rights reserved.