Kemahiran pembangunan Vue3+TS+Vite: cara membangunkan widget dan pemalam

Vue3 ialah versi terkini Vue.js Ia memperkenalkan banyak ciri dan penambahbaikan baharu, membolehkan pembangun membina aplikasi web yang fleksibel dengan lebih cekap. Dalam Vue3, TypeScript (TS) boleh disepadukan dengan lancar dengan Vue, memberikan kami keupayaan semakan jenis yang berkuasa. Vite ialah alat pembangunan berasaskan modul ES yang ringan dengan masa mula sejuk yang cepat dan kemas kini modul panas yang pantas. Artikel ini akan memperkenalkan anda cara menggunakan Vue3, TS dan Vite untuk pembangunan widget dan pemalam untuk menjadikan aplikasi anda lebih modular dan boleh dikembangkan.

Pertama sekali, kami perlu memasang kebergantungan berkaitan Vue3 dan Vite. Buka alat baris arahan, masukkan direktori akar projek, dan laksanakan arahan berikut:

npm install vue@next
npm install -g create-vite

Selepas pemasangan selesai, kami boleh menggunakan Vite untuk memulakan projek Vue3 dengan cepat. Jalankan arahan berikut:

create-vite my-app --template vue-ts

Ini akan mencipta folder bernama my-app, yang mengandungi templat untuk projek asas Vue3. Masukkan folder aplikasi saya dan laksanakan arahan berikut untuk memulakan projek:

cd my-app
npm install
npm run dev

Sekarang, kami telah berjaya memulakan projek Vue3 dan boleh melihat aplikasi dalam penyemak imbas.

Seterusnya, mari bangunkan widget untuk menjadikan aplikasi kami lebih fleksibel. Mula-mula, buat folder baharu dalam direktori src dan namakannya sebagai widget. Cipta komponen Vue baharu dalam folder widget dan namakannya HelloWorldWidget.vue.

Dalam HelloWorldWidget.vue, kita boleh mentakrifkan widget HelloWorld yang ringkas:

<template>
  <div>
    <h1>Hello World!</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorldWidget',
  props: {
    message: {
      type: String,
      required: true
    }
  }
})
</script>

Import dan daftar komponen HelloWorldWidget dalam main.ts: #🎜🎜🎜🎜 #

import HelloWorldWidget from './widgets/HelloWorldWidget.vue'

createApp(App)
  .component('HelloWorldWidget', HelloWorldWidget)
  .mount('#app')

Jalankan aplikasi, kami boleh menggunakan komponen HelloWorldWidget dalam App.vue:

<template>
  <div id="app">
    <HelloWorldWidget message="Welcome to my app!" />
  </div>
</template>

Dengan cara ini, kami boleh membangunkan dan menggabungkan widget berbeza dengan mudah, mencapai lebih banyak kefleksibelan dan kebolehgunaan Struktur aplikasi boleh guna semula.

Selain pembangunan widget, kami juga boleh menggunakan Vue3, TS dan Vite untuk membangunkan pemalam. Pemalam ialah fungsi modular yang digunakan untuk melanjutkan aplikasi Vue. Melalui pemalam, kami boleh menambah fungsi lain pada aplikasi, seperti permintaan data, pengurusan negeri, penghalaan, dsb.

Katakan kita ingin membangunkan pemalam yang dipanggil ApiPlugin untuk mengendalikan permintaan data. Mula-mula, buat pemalam folder baharu di bawah src. Cipta modul TS baharu dalam folder pemalam dan namakannya api.ts.

Dalam api.ts, kami boleh mentakrifkan pemalam ApiPlugin yang mudah:

import { App } from 'vue'

export default {
  install(app: App) {
    app.config.globalProperties.$api = {
      getData() {
        // 发送数据请求
      }
    }
  }
}

Import dan pasang pemalam ApiPlugin di main.ts:

import apiPlugin from './plugins/api'

createApp(App)
  .use(apiPlugin)
  .mount('#app')

#🎜 🎜#Kini, kita boleh mengakses objek $api sepanjang aplikasi dan memanggil kaedah getData di dalamnya untuk menghantar permintaan data.

Dengan menggunakan Vue3, TS dan Vite untuk pembangunan widget dan pemalam, kami boleh menjadikan aplikasi kami lebih modular dan boleh dikembangkan. Dengan bantuan gabungan API Vue3, pemeriksaan jenis TS dan ciri pembangunan pesat Vite, kami boleh membina aplikasi web yang kompleks dengan lebih cekap. Saya harap artikel ini akan membantu perjalanan pembangunan Vue3+TS+Vite anda!

Atas ialah kandungan terperinci Kemahiran pembangunan Vue3+TS+Vite: cara membangunkan widget dan pemalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!