【JavaScript】Vue.jsプロジェクトの作成手順

こんにちは、Jeannieです。

今回は、Vue.jsの開発をやっていく上での基礎中の基礎である、プロジェクトの作成手順をまとめました。

どんなアプリケーションを作るかによって、また開発者の好みによって手順は少し変わってきますが、プロジェクト作成の大まかな流れを理解するために本記事を書いています。

トピック

前提

Vue.jsのプロジェクトを作成するにあたって、以下がインストールされている前提で記載しています。

さっそくプロジェクトを作成していきましょう。

まずは、ターミナルから任意のディレクトリで以下のコマンドを実行します。
※demo-applicationは任意のプロジェクト名を入力してください。

vue create demo-application

コマンドを実行すると以下のような表示が出てきます。

デフォルトのプリセット(バージョン2 or 3)を使用するか、マニュアルで作成していくかの選択画面です。

作成したいアプリケーションによって柔軟に選択していけるので、ここではマニュアルを選択します。

続いて、以下の選択肢が表示されます。

バージョンを選択するのか？Babelを使用するのか？TypeScriptを使用するのか？など、アプリケーションに応じて必要なものを選択していきます。（スペースキーで選択可能です）

今回は上記画像のように選択しました。

以降は、ここで選択したものの詳細を設定する問いがいくつか表示されます。

今回の場合、バージョンの選択にチェックを入れたので、まずはバージョンの選択が問われます。

バージョン2を使うか、3を使うかを選択してEnterを押します。

続いて、Vue Routerのモードを聞かれます。

ヒストリーモードを使用する予定なので、このままEnterを押します。
※文末にある(Y/n)はyes/noの意味ですが、大文字の方がデフォルトで選択されますので、ヒストリーモードを使用しない場合はnを入力した後にEnterを押します。

続いて、Lintの設定を聞かれます。
今回はStandard configを選択しています。

ここはコードチェックを厳格にしたい / 緩くしたいなど、好みに応じて選択してください。

続いて、Lintの実行タイミングの設定です。

コード保存時にチェックしたいので、Lint on saveを選択しました。

続いて、BabelやESLintなどの設定をどこに保存するかの設定です。

今回は、package.jsonに保存するようにしました。

続いて、プロジェクトのひな型として設定するかどうかの問いです。

今回作成したプロジェクトをひな型として保存したい場合は、Yを入力してEnterを押してください。

今回は特に不要なのでデフォルトのままEnterを押しています。

ここまで選択すると、プロジェクトの作成が開始されます。

作成が無事に完了したら以下のコマンドを実行してプロジェクトのディレクトリに移動します。

cd demo-application

そして、以下のコマンドを実行してサーバーを起動します。

yarn serve

サーバーの起動が完了したらブラウザで「http://localhost:8080/」アクセスして、以下の画面が表示されればOKです。