#概要
最近人気であるJavaScriptフレームワーク「Vue.js」を試してみようと思い、Vue.jsアプリケーションの開発支援ツールである「Vue CLI」の開発環境の構築を行いましたのでその手順を記載しました。
- 開発環境「Vue CLI」の導入手順
- Node.jsのインストール
- Vue CLIのインストール
- Vue CLIの基本的な使い方
- ホットリロード機能の確認
- 導入環境
- Windows10 Home 64bit バージョン1903
#開発環境「Vue CLI」の導入手順
Vue CLIのインストールはWindowsのコマンドプロンプトやMacのターミナルなどのようなコマンドラインツールを使用して、npmコマンドを入力実行して行っていきます。
npmは、JavaScript用のパッケージ管理ツールですが、npmがインストールされていなくとも、JavaScriptの実行環境であるNode.jsをインストールすると、一緒にnpmもインストールされるので、「Node.js」をインストール後、「Vue CLI」をインストールする順番で導入していきます。
##Node.jsのインストール
公式サイトから該当するプラットフォームのインストーラをダウンロードします。
https://nodejs.org/ja/download/
ここでは導入先環境がWindowsの64bitマシンなので、msiインストーラをダウンロードしますが、自分の環境に合ったインストーラをダウンロードします。
Windowsの場合は簡単で、ダウンロードしたインストーラを実行後、画面の指示に従ってインストールを進めていきます。
「Next」をクリックします
ライセンス同意のチェックをつけて「Next」をクリックします
インストール先を指定します。（ここではデフォルトのままにしています。）
インストール内容を選択します。（ここではデフォルトのままにしています。）
ツールをインストールするか選択します（ここではインストールしません。）
インストール開始画面で「install」をクリックすると、Node.jsのインストールが開始されます。
インストールが終了すると完了画面が表示されるので、「Finish」をクリックしてインストーラを閉じます。
Node.jsをインストールするとnpmも一緒にインストールされるので、正常にインストールできたかどうか確認します。コマンドラインから次のnpmコマンドを実行します。正常にインストールされていれば「6.14.8」(2020年11月時点)のようにnpmのバージョンが表示されます。
npm --version
Node.jsのバージョンも確認しておきます。コマンドラインから次のnodeコマンドを実行します。正常にインストールされていれば「v14.15.0」(2020年11月時点)のようにnpmのバージョンが表示されます。
node --version
##Vue CLIのインストール
Vue CLIのインストールは、コマンドラインから次のnpmコマンドを実行します。
少し時間がかかるので、インストール状況の表示が更新されるのを待ちます。
npm install -g @vue/cli
進行状況
正常にインストールできたか確認するために、コマンドラインから次のvueコマンドを実行します。正常にインストールされていれば「4.5.8」(2020年11月時点)のようにVue CLIのバージョンが表示されます。これで、Vue CLIのインストールは完了です。
vue --version
##Vue CLIの基本的な使い方
Vue CLIにはGUIのプロジェクト管理ツールが用意されていて、ツールの画面からプロジェクトの作成やソースコードのビルドを実行できます。VueCLIではアプリケーションの管理単位をプロジェクトと呼んでいます。プロジェクト管理ツールを起動するには、コマンドラインから次のvueコマンドを実行します。
vue ui
起動に成功すると次のような初期画面がブラウザで表示されます。
###新しいプロジェクトを作成する
「ここに新しいプロジェクトを作成する」をクリックして、プロジェクトの作成場所を指定します。保存場所を指定したら「次へ」でプリセットの設定画面に進みます。
ここでは、最初のデフォルトのプリセット「babel, eslint」を選択します。
「プロジェクトを作成する」をクリックすると、選択したプリセットに応じたプラグインのインストールが始まるので、プロジェクトの作成が完了するまで待ちます。
プロジェクトの作成が完了すると、プロジェクトの管理画面が表示されます。プロジェクトフォルダを確認してみると、プロジェクトのサンプルソースコードが自動的に配置されています。
###開発環境(ローカル環境)向けのビルド
プロジェクト管理画面の左メニューにある「タスク」を選択します。タスクの一覧から「serve」を選択して「タスクの実行」をクリックします。
この操作によって、ローカルサーバー上でアプリケーションが実行できるようにコンパイルを行います。出力タブに切り替えて見るとコマンドラインから実行できるコマンドを実行しているだけでした。
コンソールに出力されている最後のメッセージを確認すると今の状況を教えてくれていました。
- [http://localhost:8080/] でアプリケーションが起動してます。
- 開発環境向けビルドは最適化されていないことに注意してください。
- 本番環境向けのビルドは、npm runbuildコマンドを実行します。
開発環境向けのビルドでは、実際に参照されていないプラグインやライブラリが含まれているようで、本番環境にデプロイするには向いてないみたいです。本番環境向けのビルドは「build」タスクの実行ボタンをクリックするだけで実行できるようです。
ブラウザで[http://localhost:8080/] にアクセスしてみると、Vue CLIのローカルサーバー上で起動しているアプリケーションの初期画面が表示できました。
###ホットリロード機能の確認
アプリケーションの初期画面を開いた状態で、ソースコードを更新すると、自動的にブラウザで反映されるか試してみます。プロジェクトフォルダ内のsrc/App.vueファイルをテキストエディタで開いて、内容を変更してみます。
#変更前
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
#変更後
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="はじめてVue CLIを導入してみた！"/>
</div>
</template>
ブラウザをリロードしなくても画面の内容が変更されることが確認できました。ブラウザをリロードしなくてもリアルタイムに反映されるこのホットリロード機能すばらしいですね。
今回はここまで！