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> 構文を使用してコンポーネントを定義でき、コンポーネントのロジックとテンプレートを 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 修飾子を介して双方向バインディングを実装します。

@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>

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;

を指定して使用します: <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div> これで、コンポーネント内でルーティングを使用できるようになります: <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div> この例では、<router- link><p> を使用してナビゲーション リンクを生成し、</p> <router-view><p> を介して現在のルートに対応するコンポーネントをレンダリングします。 <code>結論: Vue3 TS Vite を組み合わせて使用​​することで、保守可能でスケーラブルなアプリケーション アーキテクチャをより適切に構築できます。開発プロセス中に、単一ファイル コンポーネント、コンポーネント通信、状態管理、およびルーティング管理を使用して、コードの可読性と保守性を向上させることができます。同時に、TypeScript の静的型チェックと Vite の高速構築機能を使用して、開発効率を向上させることもできます。この記事が Vue3 TS Vite 開発に役立つことを願っています。

参考資料:

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

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