Vue3 TS Vite 開発スキル: 保守可能でスケーラブルなアプリケーション アーキテクチャを構築する方法
はじめに:
フロントエンド テクノロジーの継続的な進化に合わせて, Vue3 は、優れたフロントエンド フレームワークとして、ほとんどの開発者にとって最初の選択肢の 1 つとなっています。 TypeScript と Vite を使用すると、保守可能でスケーラブルなアプリケーション アーキテクチャをより適切に構築できます。この記事では、読者の理解を深めるために、いくつかの Vue3 TS Vite 開発テクニックをコード例と組み合わせて紹介します。
1. プロジェクトの構築
まず、Vite スキャフォールディング ツールをインストールし、新しいプロジェクトを作成する必要があります。ターミナルを開いて次のコマンドを入力します。
npm init vite@latest
プロンプトに従って設定し、Vue 3、TypeScript、およびその他の関連オプションを選択し、プロンプトに従ってプロジェクトの初期化を完了します。
2. コンポーネント開発
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 を定義し、それをテンプレートで使用します。
大規模なアプリケーションでは、コンポーネント間の通信は重要な問題です。 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; それを main.ts# に導入します。 ##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;'><template>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</template></pre><div class="contentsignin">ログイン後にコピー</div></div> この例では、<router- link><p> を使用してナビゲーション リンクを生成し、</p>
<router-view><p> を介して現在のルートに対応するコンポーネントをレンダリングします。 <code>結論: Vue3 TS Vite を組み合わせて使用することで、保守可能でスケーラブルなアプリケーション アーキテクチャをより適切に構築できます。開発プロセス中に、単一ファイル コンポーネント、コンポーネント通信、状態管理、およびルーティング管理を使用して、コードの可読性と保守性を向上させることができます。同時に、TypeScript の静的型チェックと Vite の高速構築機能を使用して、開発効率を向上させることもできます。この記事が Vue3 TS Vite 開発に役立つことを願っています。
参考資料:
Vue 3 公式ドキュメント: https://v3.vuejs.org/TypeScript 公式ドキュメント: https://www.typescriptlang .org/以上がVue3+TS+Vite 開発スキル: 保守可能でスケーラブルなアプリケーション アーキテクチャを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
