HTML5テクニカルノート

Vue CLI 3入門 03: プロトタイプを簡単につくる

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

Vue CLIを使えば、Vue.jsによるアプリケーションのプロトタイプが簡単につくれます。本稿は「Instant Prototyping」をもとに、Vue CLIを用いたプロトタイプのつくり方についてご説明します。

01 vue serveをインストールする

vue serveとvue buildコマンドを使うと、*.vueファイルひとつの簡単なプロトタイプがつくれます。ただし、予めグローバルなアドオン@vue/cli-service-globalをインストールしておかなければなりません。


npm install -g @vue/cli-service-global

macOSで管理者権限が求められたときには、sudoコマンドを加えてください。


sudo npm install -g @vue/cli-service-global

vue serveは残念ながら、グローバルにインストールされた依存関係にもとづきます。そのため、マシンが異なると矛盾が生じるかもしれません。したがって、プロトタイプを簡易につくるときのみお使いください。

02 プロトタイプをつくる

vue serveは、設定なしに.jsまたは.vueファイルを開発モードでつくります。つぎのように-hオプションで、ヘルプメッセージが見られます。


vue serve -h

  Usage: serve [options] [entry]

  serve a .js or .vue file in development mode with zero config

  Options:

    -o, --open  Open browser
    -c, --copy  Copy local url to clipboard
    -h, --help  output usage information

ひとつやらなければならないのは、App.vueファイルをつくることです。テンプレートだけつぎのように書き込んでおきます。

App.vue


<template>
	<h1>Hello!</h1>
</template>

つぎのようにserveコマンドを打ち込めば、.vueファイルがローカルサーバーhttp://localhost:8080/で開けます(図001)。


vue serve

図001■ローカルサーバーで開いたVueアプリケーション

つくったのは.vueファイルだけで、設定ファイルはありません。vue serveはデフォルトの設定(WebpackとBabel、PostCSSおよびESLint)でVueアプリケーションを動かすのです。この設定はvue createのデフォルトでもあります。また、現行ディレクトリのつぎのファイルがエントリとみなされます。

main.js
index.js
App.vue
app.vue

違うファイルをエントリにしたいときは、ファイル名をコマンドに加えてください。


vue serve MyComponent.vue

index.htmlやpackage.jsonを加えても構いません。ローカルの依存関係をインストールして使うことができます。BabelやPostCSSおよびESLintもそれぞれの設定ファイルで調整が可能です。

03 ビルドする

.jsまたは.vueファイルを、設定なしに開発モードでビルドするのがvue buildです。つぎのように-hオプションで、ヘルプメッセージが見られます。


vue build -h

  Usage: build [options] [entry]

  build a .js or .vue file in production mode with zero config

  Options:

    -t, --target <target>  Build target (app | lib | wc | wc-async, default: app)
    -n, --name <name>      name for lib or web-component mode (default: entry filename)
    -d, --dest <dir>       output directory (default: dist)
    -h, --help             output usage information

vue buildで、対象ファイルをデプロイ用のプロダクションビルドにできます。


vue build MyComponent.vue

vue buildでコンポーネントを、ライブラリやwebコンポーネントとしてビルとすることもできます。詳しくは「Build Targets」をご参照ください。

Vue CLI 3入門

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