VueCLIのインストールから開発用サーバの起動まで


vue.js はJavaScriptのフレームワークの一つで、シングルページアプリケーションの作成などのため導入される。
VueCLIはvue.jsで開発をするためのツールである。
大規模な開発になるとこのようなツールがあったほうがいいようです。

Node.jsをインストール

JavaScript環境であるNode.jsを公式ページよりインストールする。
Node.jsのパッケージ管理ツールであるnpmが使用できるようになる。

VueCLI インストール

ここからはターミナルから操作する。(今回はbashを使用。)
先ほど使えるようになったnpmコマンドにより、VueCLIを導入する。

$ npm install -g @vue/cli 

-gはグローバルインストールとするための宣言で、インストールしたパッケージをどのディレクトリからでも実行できる(パスを通す)ことができる。
これを付けずにローカルインストールした場合、カレントディレクトリにパッケージが置かれ、実行時にパスの指定が必要になる。
実行環境でパスが通されてない場合を考えるとローカルインストールにした方がいいという考えも多々あるので状況次第で選ぶ。

vueプロジェクトを作成

インストールが完了したらvueコマンドが使用可能になる。
プロジェクトを作成する下記コマンドを実行。

$ vue create {プロジェクト名}

設定のオプションが表示されるので必要なものを選択してenterを押す。

このほかに中国国内で使用できるようにtaobaoとの接続を有効にするオプションも表示されることがあるようだ。

開発用サーバの起動

開発を始められる。
開発中のページを確認するために、下記コマンドで開発用サーバを起動する。

$ npm run serve

localhost:8080からページを確認することができるのでブラウザからアクセスしよう。
プロジェクトのソースに変更があると、このページにも逐次反映される。