最初の Vue.js プロジェクトの設定

Vue.js は、ユーザー インターフェイスとシングル ページ アプリケーションを構築するためのプログレッシブ JavaScript フレームワークです。柔軟性が高く、他のライブラリや既存のプロジェクトと簡単に統合できます。このガイドでは、Vue アプリケーションのスキャフォールディングと管理のための強力なツールである Vue CLI を使用して、最初の Vue.js プロジェクトをセットアップする手順を説明します。

前提条件

Vue.js プロジェクトをセットアップする前に、システムに次のものがインストールされていることを確認してください。

• Node.js と npm: Vue.js を使用するには、Node.js と npm (Node Package Manager) がインストールされている必要があります。これらは、公式 Node.js ウェブサイト からダウンロードできます。

ステップ1: Vue CLIをインストールする

Vue CLI (コマンド ライン インターフェース) は、Vue.js プロジェクトを簡単に作成および管理するのに役立つツールです。Vue CLI をシステムにグローバルにインストールするには、ターミナルまたはコマンド プロンプトを開き、次のコマンドを実行します。

npm install -g @vue/cli

このコマンドは、Vue CLI をグローバルにインストールし、ターミナルのどこからでも vue コマンドにアクセスできるようにします。

ステップ2: 新しいVueプロジェクトを作成する

Vue CLI をインストールしたら、次のコマンドを実行して新しい Vue.js プロジェクトを作成できます。

vue create my-vue-app

プロジェクトのプリセットを選択するように求められます。Babel と ESLint を含むデフォルトのプリセットを選択するか、Vue Router、Vuex、TypeScript などの機能を手動で選択することができます。初心者の場合は、Enter を押してデフォルトのプリセットを選択することをお勧めします。

Vue CLI は my-vue-app という名前の新しいフォルダーを作成し、必要なすべてのファイルと構成を含むプロジェクト構造を設定します。

ステップ3: プロジェクトフォルダに移動する

プロジェクトが作成されたら、次のコマンドを使用してプロジェクト フォルダーに移動します。

cd my-vue-app

これにより、ターミナルの作業ディレクトリが新しく作成された Vue.js プロジェクト フォルダーに変更されます。

ステップ4: 開発サーバーを実行する

新しい Vue.js アプリケーションの動作を確認するには、次のコマンドを実行してローカル開発サーバーを起動します。

npm run serve

このコマンドは、http://localhost:8080 (または別の使用可能なポート) で開発サーバーを起動します。Web ブラウザーを開いてこの URL に移動し、新しい Vue.js アプリケーションを表示します。

プロジェクト構造を理解する

新しい Vue.js プロジェクトを作成すると、整理されたプロジェクト構造が表示されます。主要なファイルとフォルダーは次のとおりです。

• src: このフォルダーには、Vue.js アプリケーションのソース コードが含まれています。すべてのコンポーネント、ビュー、スタイルはここにあります。
• public: このフォルダーには、画像、フォント、アプリケーションのエントリ ポイントとして機能する index.html ファイルなどの静的アセットが含まれています。
• src/main.js: Vue.js アプリケーションのメイン エントリ ポイント。このファイルは、Vue インスタンスを初期化し、DOM にマウントします。
• src/App.vue: アプリケーションのルート コンポーネント。このファイルを変更して、アプリのメイン レイアウトを変更できます。
• src/components: このフォルダには、HelloWorld.vue のようなサンプル Vue コンポーネントが含まれています。ここに新しいコンポーネントを追加し、アプリケーションにインポートできます。

ステップ5: アプリケーションをカスタマイズする

App.vue ファイルを編集して新しいコンポーネントを作成することで、Vue.js アプリケーションのカスタマイズを開始できます。以下は、単純な Vue コンポーネントの例です。

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Vue のホットリロード機能により、変更を保存すると、ブラウザですぐに結果を確認できます。

結論

おめでとうございます。初めての Vue.js プロジェクトを正常にセットアップし、Vue アプリケーションの作成と実行の基本を学習しました。Vue CLI を使用すると、Vue.js プロジェクトのスキャフォールディング、開発、管理に役立つ強力なツールが得られます。ここから、ルーティング用の Vue Router、状態管理用の Vuex、より強力で柔軟な開発のための Composition API などのより高度な機能を探索できます。