Vue3入門

Vue3 での環境構築

Vue.js 3 プロジェクトを開始するための環境を構築する方法はいくつかありますが、最も一般的な方法は Vue CLI（Command Line Interface）を使用することです。Vue CLI は、Vue.js アプリケーションを迅速に設定し、開発を効率化するための公式ツールです。以下に、Vue CLI を使用した Vue.js 3 プロジェクトの環境構築手順を示します。

1. Node.js のインストール:

Vue CLI は Node.js と npm（または Yarn）に依存しています。まず、Node.js の公式ウェブサイトから Node.js をダウンロードしてインストールしてください。インストールが完了したら、ターミナルまたはコマンドプロンプトで以下のコマンドを入力して、Node.js と npm のバージョンを確認します。

node -v
npm -v

2. Vue CLI のインストール:

Node.js と npm がインストールされたら、Vue CLI をグローバルにインストールします。以下のコマンドを実行します。

npm install -g @vue/cli

これにより、システム全体で Vue CLI が利用できるようになります。

3. Vue.js 3 プロジェクトの作成:

Vue CLI がインストールされたら、新しい Vue.js 3 プロジェクトを作成できます。適当なディレクトリで以下のコマンドを実行します。

vue create my-vue-app

上記のコマンドは、“my-vue-app"という名前の新しい Vue.js プロジェクトを作成します。Vue CLI はプロジェクトのセットアップに必要な依存関係を解決し、必要なファイルとフォルダを生成します。

4. プロジェクトのディレクトリに移動してサーバーを起動:

プロジェクトが作成されたら、プロジェクトのディレクトリに移動します。

cd my-vue-app

その後、開発サーバーを起動して Vue.js アプリケーションをローカルで実行できます。

npm run serve

上記のコマンドを実行すると、開発用のサーバーが起動し、デフォルトではhttp://localhost:8080でアプリケーションにアクセスできるようになります。

以上で、Vue.js 3 プロジェクトの基本的な環境が構築されました。必要に応じて、プロジェクトの設定やコードを編集して、Vue.js アプリケーションの開発を開始できます。

Vue3 プロジェクトの例

Vue.js のコンポーネントを定義します。src/components ディレクトリ内に CounterVue.vue という名前のファイルを作成します：

<template>
  <div>
    <h1>Vue.js Counter Demo</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increment() {
        this.count++;
      },
      decrement() {
        this.count--;
      },
    },
  };
</script>

<style scoped>
  /* スタイルはここに */
</style>

上記のコードは、Vue.jsのコンポーネントを定義しています。このコンポーネントはカウンターの値を保持し、increment メソッドと decrement メソッドを使用して値を増減させます。

次に、src/App.vue ファイルを編集して、先ほど作成したカウンターコンポーネントを表示します：

<template>
  <div id="app">
    <CounterVue />
  </div>
</template>

<script>
  import CounterVue from "./components/CounterVue.vue";

  export default {
    components: {
      CounterVue,
    },
  };
</script>

<style>
  /* スタイルはここに */
</style>

サーバを起動し、画面を確認する

npm run serve

これで、簡単なVue.jsのデモアプリケーションが完成しました。カウンターアプリケーションは非常にシンプルですが、Vue.jsの基本的な構文やコンポーネントの作成方法を学ぶのに適しています。必要に応じて、このデモを拡張したり、他のVue.jsの機能を追加してみることで、より複雑なアプリケーションを作成できます。

Vue3 での環境構築#

1. Node.js のインストール:#

2. Vue CLI のインストール:#

3. Vue.js 3 プロジェクトの作成:#

4. プロジェクトのディレクトリに移動してサーバーを起動:#

Vue3 プロジェクトの例#