Kemahiran pembangunan Vue3+TS+Vite: cara membina seni bina aplikasi yang boleh diselenggara dan berskala

Vue3+TS+Vite Petua Pembangunan: Bagaimana untuk membina seni bina aplikasi yang boleh diselenggara dan berskala

Pengenalan:

#🎜 #Dengan evolusi berterusan teknologi bahagian hadapan, Vue3, sebagai rangka kerja bahagian hadapan yang sangat baik, telah menjadi salah satu pilihan pertama bagi kebanyakan pembangun. Dengan TypeScript dan Vite, kami boleh membina seni bina aplikasi yang boleh diselenggara dan berskala dengan lebih baik. Artikel ini akan memperkenalkan beberapa teknik pembangunan Vue3+TS+Vite, digabungkan dengan contoh kod, untuk membantu pembaca memahami dengan lebih baik.

1. Pembinaan projek

Pertama, kita perlu memasang alat perancah Vite dan mencipta projek baharu. Buka terminal dan masukkan arahan berikut:

npm init vite@latest

Konfigurasikan mengikut gesaan, pilih Vue 3, TypeScript dan pilihan lain yang berkaitan, dan ikut gesaan untuk melengkapkan pemulaan projek.

2. Pembangunan komponen

Komponen fail tunggal

In Vue digunakan untuk pembangunan, komponen fail tunggal digunakan Kod kami adalah cara yang sangat cekap. Dalam Vue3, kami boleh menggunakan sintaks <script setup></script> untuk mentakrifkan komponen, yang boleh mengurus logik dan templat komponen dengan lebih baik dalam satu fail. Sebagai contoh, kami mencipta komponen HelloWorld:

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

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

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

<script setup></script>语法来定义组件，这样可以更好地将组件的逻辑和模板放在一个文件中管理。例如，我们创建一个HelloWorld组件：

// 祖先组件
<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>

在上面的代码中，我们使用ref来定义响应式的数据message，并在模板中使用它。

2. 组件通信

在大型应用中，组件之间的通信是一个重要的问题。Vue3提供了provide/inject和emits两种方式来实现组件之间的通信。

provide/inject 可以在祖先组件中提供数据，并在后代组件中使用。例如：

// 子组件
<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>

在上述代码中，我们通过provide提供了一个名为userData的数据，然后在后代组件中通过inject来使用。

emits 用于父子组件之间的通信。例如：

import { reactive } from 'vue';

export interface State {
  count: number;
}

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

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

在上面的代码中，子组件通过emit来触发一个自定义事件，并将数据传递给父组件。父组件通过.sync修饰符来实现双向绑定。

三、状态管理

在大型应用中，状态管理非常重要。Vue3提供了一个新的状态管理库 @vue/reactivity，它可以帮助我们更好地管理应用的状态。

我们可以将状态管理库作为一个单独的模块来使用，例如创建一个store文件夹，然后在其中创建一个index.ts文件，编写以下代码：

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

然后，我们可以在组件中使用这个状态和方法：

npm install vue-router@4

在这个例子中，我们将状态和方法存储在独立的文件中，以便在需要的时候进行访问。

四、路由管理

对于前端应用来说，路由管理也是非常重要的一部分。在Vue3中，我们可以使用vue-router来管理路由。

首先，我们需要安装vue-router，在终端中输入以下命令：

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;

然后，在src目录下创建一个router文件夹，并在其中创建一个index.ts文件，编写以下代码：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

然后，在main.ts中引入router并使用它：

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</template>

现在，我们可以在组件中使用路由了：

rrreee

在这个例子中，我们通过<router-link></router-link>来生成导航链接，并通过<router-view></router-view>Dalam kod di atas, kami menggunakan ref untuk mentakrifkan data responsif message dan dalam Use it dalam templat.

Komunikasi komponen

Dalam aplikasi besar, komunikasi antara komponen merupakan isu penting. Vue3 menyediakan dua kaedah: provide/inject dan emis untuk mencapai komunikasi antara komponen.
provide/inject boleh menyediakan data dalam komponen nenek moyang dan menggunakannya dalam komponen keturunan. Contohnya:

rrreee
• Dalam kod di atas, kami menyediakan data bernama userData melalui provide, dan kemudian dalam komponen turunan melalui inject untuk digunakan.
• emis digunakan untuk komunikasi antara komponen ibu bapa dan anak. Contohnya:
rrreee
• Dalam kod di atas, komponen anak mencetuskan peristiwa tersuai melalui pancarkan dan menghantar data kepada komponen induk. Komponen induk melaksanakan pengikatan dua hala melalui pengubah suai .sync.

3. Pengurusan negeri #🎜🎜##🎜🎜# Dalam aplikasi besar, pengurusan negeri adalah sangat penting. Vue3 menyediakan pustaka pengurusan negeri baharu @vue/reactivity, yang boleh membantu kami mengurus keadaan aplikasi dengan lebih baik. #🎜🎜##🎜🎜#Kita boleh menggunakan pustaka pengurusan negeri sebagai modul berasingan, contohnya, buat folder store dan kemudian buat fail index.ts , tulis kod berikut: #🎜🎜#rrreee#🎜🎜# Kemudian, kita boleh menggunakan keadaan dan kaedah ini dalam komponen: #🎜🎜#rrreee#🎜🎜#Dalam contoh ini, kami menyimpan keadaan dan kaedah dalam dalam fail berasingan untuk akses mudah apabila diperlukan. #🎜🎜##🎜🎜# 4. Pengurusan penghalaan #🎜🎜##🎜🎜# Untuk aplikasi bahagian hadapan, pengurusan penghalaan juga merupakan bahagian yang sangat penting. Dalam Vue3, kita boleh menggunakan vue-router untuk mengurus penghalaan. #🎜🎜##🎜🎜#Pertama, kita perlu memasang vue-router dan masukkan arahan berikut dalam terminal: #🎜🎜#rrreee#🎜🎜#Kemudian, dalam srcBuat folder <code>router dalam direktori, buat fail index.ts di dalamnya dan tulis kod berikut: #🎜🎜#rrreee#🎜🎜#Then , dalam router ke dalam kod>main.ts dan gunakannya: #🎜🎜#rrreee#🎜🎜#Sekarang, kita boleh menggunakan penghalaan dalam komponen: #🎜🎜#rrreee #🎜 🎜#Dalam contoh ini, kami menggunakan <router-link></router-link> untuk menjana pautan navigasi dan menggunakan <router-view></router-view> untuk memaparkan komponen yang sepadan dengan laluan semasa. #🎜🎜##🎜🎜#Kesimpulan: #🎜🎜##🎜🎜# Dengan menggunakan gabungan Vue3+TS+Vite, kami boleh membina seni bina aplikasi yang boleh diselenggara dan berskala dengan lebih baik. Semasa proses pembangunan, kami boleh menggunakan komponen fail tunggal, komunikasi komponen, pengurusan keadaan dan pengurusan penghalaan untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Pada masa yang sama, kami juga boleh menggunakan pemeriksaan jenis statik TypeScript dan keupayaan pembinaan pantas Vite untuk meningkatkan kecekapan pembangunan. Saya harap artikel ini akan membantu pembangunan Vue3+TS+Vite. #🎜🎜##🎜🎜#Rujukan: #🎜🎜##🎜🎜##🎜🎜#Vue 3 dokumentasi rasmi: https://v3.vuejs.org/#🎜🎜##🎜🎜#TypeScript dokumentasi rasmi ://www.typescriptlang.org/#🎜🎜##🎜🎜#Vite dokumentasi rasmi: https://vitejs.dev/#🎜🎜##🎜🎜#

Atas ialah kandungan terperinci Kemahiran pembangunan Vue3+TS+Vite: cara membina seni bina aplikasi yang boleh diselenggara dan berskala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!