VUE3 初心者必携のクイック開発ガイド

VUE3 初心者のための迅速な開発のための必須ガイド

Vue は人気のある JavaScript フレームワークであり、その使いやすさ、高度なカスタマイズ、迅速な開発モードにより、フロントエンド開発で人気があります。 。最新の Vue3 には、パフォーマンスの最適化、TypeScript サポート、Composition API、より優れたカスタム レンダラーなど、より強力な機能が導入されています。この記事では、Vue3 開発をすぐに始めるのに役立つ、Vue3 初心者向けの簡単な開発ガイドを提供します。

1. Vue3 のインストール

Vue3 開発を始める前に、まず Vue3 をインストールする必要があります。次のコマンドを使用してプロジェクトに Vue3 をインストールできます:

npm install vue@next

CDN を使用して Vue3 を導入している場合は、次のコードを使用する必要があります:

<script src="https://unpkg.com/vue@next"></script>

2. Vue3 アプリケーションの作成

Vue3 をインストールしたら、アプリケーションの構築を開始できます。 Vue3 は、Vue3 アプリケーションを迅速に作成および構成できるようにする Vue CLI ツールを提供します。

次のコマンドを使用して Vue CLI をインストールできます:

npm install -g @vue/cli

新しいプロジェクトを作成するコマンドは次のとおりです:

vue create my-project

3. Vue3 コンポーネントを使用します

Vue3 は完全に書き直されたレンダラーを使用するため、Vue3 コンポーネントを使用するときはいくつかの変更点に注意する必要があります。以下は Vue3 コンポーネントの例です:

// HelloWorld.vue
<template>
  <div>
    <h1>Hello world!</h1>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
});
</script>

注目に値します。コンポーネントを定義するには、Vue2 の Vue.extend の代わりに、Vue3 ## 関数の defineComponent# を使用する必要があります。

Composition API の使用

Composition API は Vue3 の新機能で、コンポーネント ロジック コードをより適切に整理して再利用できるようになります。以下は例です:

// HelloWorld.vue
<template>
  <div>
    <h1>Hello world!</h1>
    <p>Current count is: {{ count }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const count = ref(0);

    const incrementCount = () => {
      count.value++;
    };

    return {
      count,
      incrementCount,
    };
  },
});
</script>

ご覧のとおり、Composition API では、ロジック コードを

setup 関数に配置し、## を介して変数と関数を渡すことができます。 #return ステートメントはテンプレートに公開されます。

Vue3 を使用したルーティング

Vue3 のルーターにはいくつかの新機能と変更が含まれています。以下に例を示します。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Vue2 のルーターを使用する場合それに比べて、Vue3 でのルーターの使用方法は少し変わりました。ルーターを作成するには、

createRouter

関数と createWebHistory 関数を使用する必要があります。

Vue3 状態管理の使用

Vue3 の状態管理も変更されました。以下は例です:

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
  getters: {
    count(state) {
      return state.count;
    },
  },
});

ご覧のとおり、 Vue3 では、

createStore

関数を使用して新しい状態管理インスタンスを作成する必要があります。同時に、actions の context パラメーターを使用して、mutations を呼び出す必要があります。

概要

7. Vue3 は、Web ベースのアプリケーションを非常に迅速に開発できる、強力で使いやすい JavaScript フレームワークです。 Vue3 をインストールし、Vue3 アプリケーションを作成し、Vue3 コンポーネント、Composition API、Vue3 ルーティング、および Vue3 状態管理を使用することで、Vue3 の特性と実際の適用方法をより深く理解し、Vue3 開発をさらに学ぶための貴重な経験と知識を蓄積することができます。

以上がVUE3 初心者必携のクイック開発ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。