VUE3 初心者必携のクイック開発ガイド-Vue.js-php.cn

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

WBOY

リリース： 2023-06-15 16:38:05

オリジナル

2073 人が閲覧しました

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

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

Vue3 のインストール

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

npm install vue@next

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

npm install -g @vue/cli

ログイン後にコピー

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

vue create my-project

ログイン後にコピー

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 は 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 を使用したルーティング

// 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 状態管理の使用

// 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 を呼び出す必要があります。

概要

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

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