プログラミング

Vue.jsプロジェクトの作成ガイド

最終更新： 22/03/2025
1 分の読み

Vue.jsは、シンプルで効率的なフロントエンドのフレームワークとして、多くの開発者に利用されています。Vue CLI（コマンドラインインターフェース）は、Vue.jsアプリケーションのセットアップと管理を簡単に行うためのツールです。この記事では、Vue CLIを使用してVue.jsプロジェクトを作成する方法を完全かつ包括的に説明します。

Vue CLIのインストール

まず、Vue CLIをインストールする必要があります。Vue CLIはNode.jsを基盤にしているため、まずNode.jsをインストールしておく必要があります。Node.jsがインストールされていない場合は、公式サイト（https://nodejs.org）からインストールできます。

関連記事

1. Vue CLIのインストール

Vue CLIはnpm（Node Package Manager）を使用してインストールできます。以下のコマンドをターミナルに入力します。

bash
npm install -g @vue/cli

-gオプションを付けることで、Vue CLIをグローバルにインストールします。インストールが完了したら、以下のコマンドでインストールされたことを確認できます。

bash
vue --version

これでVue CLIが正常にインストールされたことを確認できます。

新しいVue.jsプロジェクトの作成

Vue CLIを使って新しいVue.jsプロジェクトを作成するのは非常に簡単です。以下の手順に従って、プロジェクトを作成しましょう。

2. プロジェクトの作成

新しいVueプロジェクトを作成するために、以下のコマンドを実行します。

bash
vue create my-project

my-projectはプロジェクトの名前です。任意の名前を付けることができます。コマンドを実行すると、いくつかの設定オプションが表示されます。

3. 設定の選択

vue createコマンドを実行した後、いくつかの選択肢が表示されます。主に2つのオプションがあります：

  1. Default (Babel, ESLint): 最も基本的な設定で、BabelとESLintが設定されたプロジェクトが作成されます。

  2. Manually select features: 必要な機能を手動で選択できます。例えば、Vue RouterやVuex、TypeScriptの使用を選択することができます。

もし手動で機能を選択したい場合は、Manually select featuresを選んで、次に進みます。選択肢として、以下のような項目があります：

  • Babel（最新のJavaScriptコードを古いブラウザでも動作するように変換する）

  • TypeScript（型安全性を追加する）

  • Router（シングルページアプリケーション（SPA）のためのルーティング）

  • Vuex（状態管理）

  • Linter/Formatter（コードの整形やエラーチェック）

  • CSS Pre-processors（SassやLessなど）

必要な機能を選択したら、設定を保存してプロジェクトの作成を開始します。

4. 依存関係のインストール

設定が完了すると、Vue CLIがプロジェクトに必要な依存関係をインストールします。これには数分かかる場合があります。インストールが完了すると、次のようなメッセージが表示されます。

bash
Successfully created project my-project.

プロジェクトの起動

プロジェクトの作成が完了したら、プロジェクトディレクトリに移動して、開発サーバーを起動します。

bash
cd my-project
npm run serve

このコマンドを実行すると、Vue.jsの開発サーバーが起動し、ブラウザでプロジェクトを確認できるようになります。デフォルトでは、http://localhost:8080でアプリケーションを確認できます。

プロジェクトの構成

プロジェクトが作成されると、いくつかの重要なファイルとディレクトリが生成されます。以下は、基本的なプロジェクト構造です。

csharp
my-project/
├── node_modules/        # プロジェクトの依存関係
├── public/              # 静的ファイル（index.htmlなど）
├── src/                 # アプリケーションのソースコード
│   ├── assets/          # 画像やCSSなどのアセット
│   ├── components/      # Vueコンポーネント
│   ├── views/           # ページビュー
│   ├── App.vue          # アプリケーションのルートコンポーネント
│   └── main.js          # アプリケーションのエントリーポイント
├── package.json         # プロジェクトの設定と依存関係
└── vue.config.js         # Vue CLIの設定ファイル（必要に応じて）

srcディレクトリ

  • App.vue: これはアプリケーションのルートコンポーネントです。Vue.jsのコンポーネントは、