Vue3+TS+Vite 開発スキル: 保守可能でスケーラブルなアプリケーション アーキテクチャを構築する方法

Vue3 TS Vite 開発スキル: 保守可能でスケーラブルなアプリケーション アーキテクチャを構築する方法

はじめに:

フロントエンド テクノロジーの継続的な進化に合わせて, Vue3 は、優れたフロントエンド フレームワークとして、ほとんどの開発者にとって最初の選択肢の 1 つとなっています。 TypeScript と Vite を使用すると、保守可能でスケーラブルなアプリケーション アーキテクチャをより適切に構築できます。この記事では、読者の理解を深めるために、いくつかの Vue3 TS Vite 開発テクニックをコード例と組み合わせて紹介します。

1. プロジェクトの構築

まず、Vite スキャフォールディング ツールをインストールし、新しいプロジェクトを作成する必要があります。ターミナルを開いて次のコマンドを入力します。

npm init vite@latest

プロンプトに従って設定し、Vue 3、TypeScript、およびその他の関連オプションを選択し、プロンプトに従ってプロジェクトの初期化を完了します。

2. コンポーネント開発

1. 単一ファイル コンポーネント

Vue 開発では、単一ファイル コンポーネントを使用してコードを管理するのが非常に効率的です。 Vue3 では、<script setup></script> 構文を使用してコンポーネントを定義でき、コンポーネントのロジックとテンプレートを 1 つのファイルでより適切に管理できます。たとえば、HelloWorld コンポーネントを作成します。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const message = ref('Hello, World!');
</script>

上記のコードでは、 ref を使用して応答データ message を定義し、それをテンプレートで使用します。

2. コンポーネント通信

大規模なアプリケーションでは、コンポーネント間の通信は重要な問題です。 Vue3 は、コンポーネント間の通信を実現する provide/inject と emits の 2 つの方法を提供します。

provide/inject データは祖先コンポーネントで提供され、子孫コンポーネントで使用できます。例:

// 祖先组件
<script setup lang="ts">
import { provide } from 'vue';
import { userData } from './data';

provide('userData', userData);
</script>

// 后代组件
<script setup lang="ts">
import { inject } from 'vue';

const userData = inject<UserData>('userData');
</script>

上記のコードでは、provide を通じて userData という名前のデータを提供し、その後 inject## を通じて子孫コンポーネントに提供します #使用します。

emis 親コンポーネントと子コンポーネント間の通信に使用されます。例:

// 子组件
<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
  emit('update:count', count.value);
}
</script>

<template>
  <div>
    <button @click="increment">增加</button>
    <p>{{ count }}</p>
  </div>
</template>

// 父组件
<template>
  <div>
    <ChildComponent :count.sync="count" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
</script>

上記のコードでは、子コンポーネントは

emit を通じてカスタム イベントをトリガーし、データを親コンポーネントに渡します。親コンポーネントは、.sync 修飾子を介して双方向バインディングを実装します。

3. 状態管理

大規模なアプリケーションでは、状態管理が非常に重要です。 Vue3 は、アプリケーションの状態をより適切に管理するのに役立つ新しい状態管理ライブラリ

@vue/reactivity を提供します。

状態管理ライブラリを別のモジュールとして使用できます。たとえば、

store フォルダーを作成し、その中に index.ts ファイルを作成します。次のコード:

import { reactive } from 'vue';

export interface State {
  count: number;
}

const state = reactive<State>({
  count: 0,
});

export function increment() {
  state.count++;
}

次に、この状態とメソッドをコンポーネントで使用できます:

<script setup lang="ts">
import { ref } from 'vue';
import { increment } from '../store';

const count = ref(0);
const handleIncrement = () => {
  increment();
}
</script>

<template>
  <div>
    <button @click="handleIncrement">增加</button>
    <p>{{ count }}</p>
  </div>
</template>

この例では、状態とメソッドを別のファイルに保存して、いつでも使用できるようにします。訪問には時間が必要でした。

4. ルーティング管理

フロントエンド アプリケーションにとって、ルーティング管理も非常に重要な部分です。 Vue3 では、

vue-router を使用してルーティングを管理できます。

まず、

vue-router をインストールする必要があります。ターミナルに次のコマンドを入力します。

npm install vue-router@4

次に、

src## に # を作成します。 # ディレクトリ ##router フォルダーを開き、その中に index.ts ファイルを作成し、次のコードを記述します。

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

それを main.ts# に導入します。

##router

を指定して使用します: <pre class='brush:typescript;toolbar:false;'>import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app');</pre> これで、コンポーネント内でルーティングを使用できるようになります: <pre class='brush:vue;toolbar:false;'>&lt;template&gt; &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt; &lt;router-link to=&quot;/about&quot;&gt;About&lt;/router-link&gt; &lt;router-view&gt;&lt;/router-view&gt; &lt;/template&gt;</pre> この例では、

を使用してナビゲーション リンクを生成し、

を介して現在のルートに対応するコンポーネントをレンダリングします。 結論: Vue3 TS Vite を組み合わせて使用​​することで、保守可能でスケーラブルなアプリケーション アーキテクチャをより適切に構築できます。開発プロセス中に、単一ファイル コンポーネント、コンポーネント通信、状態管理、およびルーティング管理を使用して、コードの可読性と保守性を向上させることができます。同時に、TypeScript の静的型チェックと Vite の高速構築機能を使用して、開発効率を向上させることもできます。この記事が Vue3 TS Vite 開発に役立つことを願っています。

参考資料:

Vue 3 公式ドキュメント: https://v3.vuejs.org/

TypeScript 公式ドキュメント: https://www.typescriptlang .org/

• Vite 公式ドキュメント: https://vitejs.dev/

以上がVue3+TS+Vite 開発スキル: 保守可能でスケーラブルなアプリケーション アーキテクチャを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。