こんにちは。KOUKIです。
都内でWeb系エンジニアとして働いています。
仕事でVueJSを使った開発案件に携わることになりまして、VueJSを学習中です。
本記事では、「VueJSの環境構築方法」について、触れようと思います。
前提事項
・ Mac PCにて動作確認
・ Chromeを使用
環境のセットアップ
NodeJSのインストール
VueJS開発を行う上で、NodeJSのインストールが必須となります。
NodeJSの公式サイトにアクセスすると「12.18.2(Version) LTS」ボタンが表示されるので、クリックしてNodeJSのインストーラをダウンロードしましょう。

※バージョンは異なる場合があります
そして、ダウンロードしたインストーラーをダブルクリックして、PCにNodeJSをインストールしてください。
インストールが問題なく完了後、ターミナル上で以下のコマンドを実行してください。
1 2 3 4 |
$ node -v v12.1.0 $ npm -v 6.14.5 |
バージョン情報が表示されたらOKです。
※バージョンは異なる場合があります
Vue CLIのインストール
続いて、Vue CLIをインストールします。
Vue CLIは、VueJS開発に必要な様々な機能を提供する開発ツールです。
インストールするには、terminal上で以下のコマンドを実行します。
1 |
npm install -g @vue/cli |
プロジェクトの作成
任意の場所で以下のコマンドを実行してください。
1 2 3 4 5 6 7 8 9 10 |
vue create vue-todo Please pick a present default (babel, eslint) <- defaultを選ぶ .... プロジェクトの作成、モジュールのインストール $ cd vue-todo $ npm run serve |
このコマンドを実行するとVueJSのプロジェクトが作成されます。尚、コマンドの途中でpresentの選択を要求されますが、ひとまず「default」を選択してください。
動作チェック
プロジェクトの作成が完了後、以下のコマンドにてプロジェクトを起動してください。
1 2 |
$ cd cue-todo $ npm run serve |
デフォルトでは、8080番ポートでプロジェクトが起動するので、ブラウザから「localhost:8080」にアクセスしてください。

問題なく表示できたらセットアップは完了です。
おわりに
これからVueJSを使って様々なアプリケーションを開発していきます。
楽しいエンジニアライフを始めましょう^^
最近のコメント