VueJSの環境構築

こんにちは。KOUKIです。

都内でWeb系エンジニアとして働いています。

仕事でVueJSを使った開発案件に携わることになりまして、VueJSを学習中です。

本記事では、「VueJSの環境構築方法」について、触れようと思います。

前提事項

・ Mac PCにて動作確認
・ Chromeを使用

環境のセットアップ

NodeJSのインストール

VueJS開発を行う上で、NodeJSのインストールが必須となります。

NodeJSの公式サイトにアクセスすると「12.18.2(Version) LTS」ボタンが表示されるので、クリックしてNodeJSのインストーラをダウンロードしましょう。

※バージョンは異なる場合があります

そして、ダウンロードしたインストーラーをダブルクリックして、PCにNodeJSをインストールしてください。

インストールが問題なく完了後、ターミナル上で以下のコマンドを実行してください。

バージョン情報が表示されたらOKです。
※バージョンは異なる場合があります

Vue CLIのインストール

続いて、Vue CLIをインストールします。

Vue CLIは、VueJS開発に必要な様々な機能を提供する開発ツールです。

インストールするには、terminal上で以下のコマンドを実行します。

プロジェクトの作成

任意の場所で以下のコマンドを実行してください。

このコマンドを実行するとVueJSのプロジェクトが作成されます。尚、コマンドの途中でpresentの選択を要求されますが、ひとまず「default」を選択してください。

動作チェック

プロジェクトの作成が完了後、以下のコマンドにてプロジェクトを起動してください。

デフォルトでは、8080番ポートでプロジェクトが起動するので、ブラウザから「localhost:8080」にアクセスしてください。

問題なく表示できたらセットアップは完了です。

おわりに

これからVueJSを使って様々なアプリケーションを開発していきます。

楽しいエンジニアライフを始めましょう^^