【Vue.js入門】最速Vue.jsの開発環境構築(vue-cli2+webpack)

はじめに

Node.jsに含まれるnpmというパッケージ管理ツールを使用するので、インストールしていない方はこの記事を見てインストールをして下さい。

また、記事中ではES2015以降のJavaScriptを利用します。
あまり馴染みのない方には以下の参考書籍がオススメです。

vue.jsをコマンドラインで操作する為のツールです。自動的にプロジェクトを作成するコマンドを叩くの為に使います。本格的なバンドラーの設定作業は複雑なので、本来であれば自分で設定ファイルを書く手間を省くためにこのツールを活用することをお勧めします。

コマンドラインを起動してnpmでvue-cliをグローバルインストールします。

$ npm install

WebpackやBabel自体についての説明や webpack.config.js の説明は割愛します。

ここまでで設定作業は完了です。JavaScript と HTML を用意して動作を確認していきましょう。

インストールすろとvueコマンドが使えます。
vueコマンドが使用出来るか確認する為、インストールしたvue-cliのバージョンを確認してみましょう。

$ vue -V>
2.9.6

次にプロジェクトの作成をします。
※作成するプロジェクトのディレクトリ名をvueとします。

$ vue init webpack vue

webpackという部分はテンプレート名です。プロジェクトの構成みたいなもので、vue-cliには数多くのテンプレートが存在します。ここでは良く知られていて情報量が多いwebpackというバンドラーを使用する為にwebpackと指定しています。

色々とオプションを質問されますが、最初は何も考えずにEnter連打でOK。少し補足すると、プログラムの構文をチェックしてくれるlinterの使用の有無や、フロント側でルーティングする機能の公式ツール(vue-router)のインストールの有無が聞かれます。しばらく経つとインストール完了です。

これでvue-testというディレクトリに空のプロジェクトが作成されました。
インストールしたディレクトリに移動して実行してみましょう。

$ cd vuenpm run dev

作成したプロジェクト名のディレクトリに入り、上記のコマンドを実行します。(依存関係のパッケージをインストール並びにプロジェクトの稼働確認)

ブラウザのアドレスバーに localhost:8080 と入力し、アクセスしてVue.jsのロゴマークがついているページが表示されたら問題なくコンポーネントがレンダリングできています。

※ WebサーバのURL は8080のポート番号が既に使われている場合は異なります。

使い方が分かれば爆速でプロジェクトを作れるので、ぜひ触ってみてください。

快適なフロントエンドライフを送りましょう！