【Vue.jsでWEB開発】Vue.jsの開発環境をつくる

Vue.jsを使うための方法として、

という方法があります。

今回の記事では、vue-cliをインストールしてVue.jsが使えるようになるまでを紹介したいと思います。

Vue.jsの開発環境をつくる【Windows】

使用しているPCにNode.jsが導入されていない場合は、Node.jsをインストールしましょう。
※使用しているPCにNode.jsがインストールされている場合は、本章の作業は不要です。

Node.jsの公式サイトにアクセスし、インストーラーをダウンロードします。
（公式サイト：https://nodejs.org/ja/）

インストーラーファイルをダウンロードできれば、ファイルをダブルクリックしてインストーラーを起動します。

設定変更が必要なければ、何も変更せずインストールを進めます。

インストールが完了すれば、Node.jsのインストール確認をします。
コマンドプロンプトを開いて、下記のコマンドを実行します。

node --version

実行結果として、Node.jsのバージョンが表示されれば、OKです。

また下記のコマンドも実行してみます。

npm --version

実行結果として、npmのバージョンが表示されれば、OKです。

これで、vue-cliをインストールするための準備が整いました。

Vue.jsの開発ツールであるvue-cliをインストールします。

コマンドプロンプトで下記コマンドを実行します。

npm install -g @vue/cli

上記のコマンドだけでvue-cliがインストールされます。

インストールが完了すれば、念のために下記のコマンドを実行して、vue-cliのバージョンを確認してみましょう。

vue --version

コマンドプロンプト上にvue-cliのバージョンが表示されれば、インストールに問題はありません。

せっかくなので、簡単なプロジェクトを作成して、Vue.jsの初期画面の表示をしてみます。

下記コマンドを実行して、プロジェクトを作成します。
プロジェクト名は一旦、testとしています。

vue create test

次にプロジェクト作成の設定を行っていきますが、テスト用なので、Enterキーを押してデフォルト設定のまま進みます。

プロジェクト作成が完了すれば、下記コマンドを実行して、起動します。
今回は、プロジェクト名をtestにしているので、フォルダ移動はtestになっています。

cd test
npm run serve

上記コマンドを実行して、『Compiled successfully in XXXms』と表示が出れば、起動OKです。
（XXXは起動にかかった時間が表示される）

Chromeなどのブラウザを開き、『http://localhost:8080』でアクセスすれば、Vue.jsのサンプル画面が表示されます。