【Vue.js】Vue.jsの開発環境の構築方法について解説します。

なやむくん

Vue.jsを使って開発したいけどどうやって開発するの…？

なやむさん

Vue.jsで開発するための環境構築の方法を知りたい。

などの疑問や悩みを解決してまいります。

この記事ではVue.jsで開発するための環境構築の手順を初心者の方にもわかりやすく解説していきます。

みつた

これから説明する手順を踏んでもらえたら簡単にVue.jsの環境構築をすることができます！

Node.jsがまだインストールできていない方はこちらからインストールしてください。

Node.jsのバージョンを変更をされたい場合は、以下の記事を参考にしてください。

みつた

Node.jsとはJavaScriptをサーバーサイドで実行するための環境のことです。

またインストールされているか確認したい場合はターミナルで以下コマンドを入力してください。

node -v

これで以下のようにインストールしているNode.jsのバージョンが表示されたらインストールされています。

①テキストエディタを開く

まずは自分が使用しているテキストエディタを開きましょう。

今回はVSCodeを使って説明していきます。

みつた

VSCodeをインストールしされる場合はこちらからインストールしてください。

②ターミナルを開く

次にターミナルを開きます。

ターミナルを開く方法は以下の2つの方法があります。

メニューから開く方法

エディタ上部にある「Terminal」します。にカーソルを合わせます。

するとメニューが展開され、その中に「New Terminal」とありますのでクリックします。

するとエディタ下部でターミナルが開かれたかと思います。これでOKです。

ショートカットでターミナルを開く方法

ターミナルはショートカットキーでも開くことが可能です。

Ctrl＋shift＋＠で開くことができます。

みつた

こちらの方がカーソル動かしたりクリックする手間も省けるのでおすすめです！

③コマンドを入力していく

次にコマンドを入力していきます。

なやむくん

コマンドって英文で入力するやつですか？初心者には難しいんじゃ…。

みつた

解説通りに入力してもらえれば全然簡単ですよ！まずはやってみましょう。

npm create vue@latest

まずは開発フォルダ内にVueファイルを作成します。

作成する方法は先程開いたターミナルで以下のコードを入力します。

> npm create vue@latest

こちらを入力してenterキーを押すと以下のようにオプションを設定する項目が表示されます。

今回は単純に環境構築をするだけですので、項目の詳しい解説は割愛させていただきます。

一旦ここではすべて「No」としておいてください。

すべて選択したら開発フォルダ内にProject nameで設定した名称（今回はvue-project）のフォルダが追加されたかと思います。

これがVueファイル群になります。

npm install

次にnpmをインストールしていきます。

npm とはNode.jsのパッケージを管理するシステムのことです。

インストールすることでローカルサーバーを立ち上げることができるようになります。

ターミナルに以下のコードを入力してください。

npm install

入力してenterキーを押すとインストールが開始します。

インストールが終わったらローカルサーバーを立ち上げてVueファイルが表示されるか確認してみましょう！

npm run dev

最後にローカルサーバーを立ち上げてVueファイルの表示を確認できるようにしていきたいと思います。

ターミナルに以下コマンドを入力してください。

npm run dev

コマンドを入力したら以下のようにターミナルに表示されるかと思います。

このhttp://localhost:○○○○/というのがローカルサーバーにアクセスできるURLです。

みつた

○○○○の部分はローカルサーバーを立ち上げたときに割り振られる番号が入ります。

アクセスすると以下のようにVueのページが表示されれば環境構築は正常に行われました。お疲れ様でした。