Vue.jsの開発環境を構築してみる

Vue.js を触る機会があったので、書くまででもないがインストール手順を書いてみた。

はじめに

この記事は、npm コマンドが既に使えるようになっていることが前提。

インストール

インストールは、ターミナルでnpm コマンドを使う。vue-cli のパッケージをインストールすることで、すぐに開発環境を準備することができる。

npm install -g vue-cli

プロジェクトの開始、テンプレートの準備

Vue.js で開発するために必要なファイル等を、ターミナルを起動させて下記のコマンドを実行しプロジェクトを作成する。

vue init webpack プロジェクト名

コマンド実行後、プロジェクトを作成するにあたり、色々とターミナルで聞かれるが、全てEnter で進めてよい。プロジェクト作成後、プロジェクト名のディレクトリが作成されている。

実行後のVue.jsの稼働確認

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

cd プロジェクト名
npm install
npm run dev

コマンド実行後、Vue.jsのWebサーバが起動する。http://localhost:8080 をブラウザで開き、Vue.jsのロゴマークがついているページが表示されたら、Vue.jsの環境構築は完了。※ WebサーバのURL は8080のポート番号が既に使われている場合は異なる。

参考URL

Vue.js の公式サイト。
https://jp.vuejs.org/v2/guide/installation.html