この記事では、Vue.jsを用いたフロントエンドの開発環境を構築する方法を7手順で紹介します。
前提
- Windows環境です
- 自身の開発環境を構築する際のメモも含みます（プロジェクト名やルートパスは読み替えてください）
手順1（Node.jsのインストール）
以下のサイトからインストーラーをダウンロードし、インストール。
URL：https://nodejs.org/ja/download/
- LTS版のご自身のOSのbit数に合わせたものをダウンロードして使いましょう。
- インストーラーは初期設定でOK
- 詳しく知りたい方は↓↓こちらの記事を参照のこと
手順2（プロジェクトフォルダを作る）
プロジェクト名（今回はknowlepo）のフォルダを作る。
↓こんな感じのフォルダを作ります。
※GitHubにリポジトリを作ったので「.git」「README.md」がありますが無視してOK。
手順3（vue/cliをインストール）
※すでにインストール済みの場合はこの手順は不要。
フロントエンドフォルダでnpm i -g @vue/cliコマンドを実行
警告（deprecated=非推奨）が出ていますが、無視して進めましょう。
手順4（vueプロジェクトを作成）
vueプロジェクトを作成するコマンドvue create knowlepoを実行
vueの2と3を選択する画面が出るので基本は3を選択
インストールが終わるとこんな感じになります。
手順5（フォルダのリネーム）
フォルダを見ると以下のようにvue.jsの基本ファイルができあがる。
ただし、「knowlepo/knowlepo」となってしまうので下の階層の「knowlepo」を「frontend」にリネームする。
※リネームするのは、今後トップフォルダに「backend」フォルダを作るためです。
こうならない方法をご存知の方がいたら教えてください。
手順6（vueサーバーのテスト起動）
リネームした「frontend」フォルダに移動しnpm run serveでテスト起動
↓こうなればOK
手順7（ブラウザからアクセス）
http://localhost:8080/にアクセスし↓が出ればOK
いかがでしたでしょうか。
vue.jsがあっという間に起動できましたか？
うまく動かなかったなどありましたらコメント欄にコメントをお願いします。
次回
次回の記事では、vue.jsのサンプル画面を変える方法を紹介します。