Bagaimana untuk membina projek dalam Vue 3.0

Versi rasmi Vue3.0 telah dikeluarkan pada September 2020, yang membawa banyak peningkatan, membolehkan pembangun menulis aplikasi Vue dengan lebih fleksibel dan cekap. Dalam artikel ini, kita akan belajar cara membina projek dalam Vue 3.0.

1. Pasang Vue CLI

Pertama, kita perlu memasang Vue CLI secara setempat. Vue CLI ialah alat perancah yang disediakan secara rasmi oleh Vue, yang digunakan untuk menjana templat untuk aplikasi Vue dengan cepat.

Jalankan arahan berikut dalam baris arahan untuk memasang Vue CLI:

npm install -g @vue/cli

2. Buat projek Vue

Selepas memasang Vue CLI, kita boleh Gunakan arahan yang diberikannya untuk mencipta projek Vue dengan cepat.

Jalankan arahan berikut pada baris arahan untuk mencipta projek Vue 3.0 baharu:

vue create my-project

Di mana, projek saya ialah nama projek.

Selepas menjalankan arahan di atas, Vue CLI akan menggesa anda untuk memilih ciri untuk dipasang. Anda boleh menggunakan kekunci anak panah atas dan bawah untuk memilih sifat dan bar ruang untuk memilih/nyahpilih sifat. Kita boleh memilih konfigurasi lalai.

3. Jalankan projek Vue

Selepas mencipta projek Vue, kita boleh menggunakan arahan berikut untuk memulakan aplikasi:

npm run serve

Arahan ini akan menyusun projek dan memulakan pelayan tempatan. Selepas pelayan bermula, anda boleh mengakses aplikasi dengan melawati http://localhost:8080 dalam pelayar anda.

4. Menulis komponen Vue

Dalam Vue 3.0, cara komponen ditulis berbeza daripada Vue 2.x. Komponen dalam Vue 3.0 terdiri daripada satu fungsi persediaan() dan bukannya komponen fail tunggal dalam Vue 2.x.

Berikut ialah contoh komponen mudah Vue 3.0:

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue 3!')
    return {
      message
    }
  }
}
</script>

Seperti yang anda lihat, kami menggunakan fungsi persediaan() untuk mencipta bahagian logik komponen dan memperkenalkan tindak balas Fungsi Vue 3.0 ref().

5. Berinteraksi dengan API

Dalam Vue 3.0, kami boleh menggunakan dua API baharu yang disediakan oleh Vue - API Komposisi dan API untuk berinteraksi dengan API. API Komposisi menyediakan cara yang lebih mudah untuk menulis dan mengatur kod komponen, manakala API menyediakan keupayaan untuk berinteraksi secara langsung dengan kejadian Vue.

Berikut ialah contoh penggunaan API Komposisi untuk berinteraksi dengan API:

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

<script>
import { ref, onMounted } from 'vue'
import Axios from 'axios'

export default {
  setup() {
    const message = ref('')
    onMounted(() => {
      Axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {
        message.value = response.data.title
      })
    })
    return {
      message
    }
  }
}
</script>

Dalam contoh di atas, kami menggunakan fungsi ref() dan onMounted() untuk mencipta pembolehubah mesej tindak balas, dan gunakan Axios untuk mendapatkan data API apabila komponen dipasang, dan tetapkan tajuk yang dikembalikan kepada pembolehubah mesej.

6. Kesimpulan

Vue 3.0 membawa banyak penambahbaikan dan ciri baharu, menjadikan pembangunan aplikasi Vue lebih cekap dan fleksibel. Dalam artikel ini, kami mempelajari cara menggunakan Vue CLI untuk mencipta projek Vue 3.0 dengan cepat dan mencipta komponen Vue mudah untuk menunjukkan kaedah penulisan komponen dan kaedah interaksi API dalam Vue 3.0.

Atas ialah kandungan terperinci Bagaimana untuk membina projek dalam Vue 3.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!