Contoh untuk menerangkan cara membina persekitaran dan projek vue3

Vue ialah rangka kerja JavaScript popular yang menyediakan kebolehgunaan semula yang berkuasa dan struktur kod yang mudah diselenggara melalui komponenisasi. Vue3 ialah versi terkini rangka kerja Vue dan telah dipertingkatkan dengan ketara dalam prestasi dan pengalaman. Dalam artikel ini, kami akan memperkenalkan cara untuk menyediakan persekitaran Vue3 dan mencipta aplikasi Vue3 yang mudah.

Langkah 1: Pasang Node.js

Sebelum menyediakan persekitaran Vue3, anda perlu memasang Node.js terlebih dahulu. Node.js ialah persekitaran sumber terbuka untuk menjalankan kod JavaScript Ia menggunakan enjin V8 terbina dalam penyemak imbas Google Chrome. Anda boleh memuat turun dan memasang versi terkini dari tapak web rasmi Node.js.

Langkah 2: Pasang Vue-CLI

Vue-CLI ialah alat perancah rasmi Vue, yang boleh mencipta projek berasaskan Vue dengan cepat. Vue-CLI boleh dipasang dengan mudah menggunakan npm, pengurus pakej yang disertakan dengan Node.js.

Buka Terminal (pengguna Mac) atau Command Prompt (pengguna Windows) dan masukkan arahan berikut:

npm install -g @vue/cli

Arahan ini akan memasang Vue-CLI secara global.

Langkah 3: Buat projek Vue3

Membuat projek Vue3 adalah mudah. Buka terminal atau command prompt, masukkan mana-mana laluan yang anda suka, dan jalankan arahan berikut:

vue create my-project

Arahan ini akan mencipta projek Vue3 bernama "my-project". Dalam langkah seterusnya, anda perlu memasukkan beberapa maklumat untuk mengkonfigurasinya.

Langkah 4: Pasang Vue3

Gunakan npm untuk memasang Vue3:

npm install vue@next

Arahan ini akan memasang Vue3.

Langkah 5: Jalankan aplikasi Vue3

Untuk menjalankan aplikasi Vue3, anda perlu pergi ke direktori projek dan jalankan arahan berikut:

npm run serve

Arahan ini akan memulakan Pelayan pembangunan yang membolehkan anda pratonton aplikasi Vue3 anda dalam penyemak imbas.

Langkah 6: Buat komponen Vue3

Dalam Vue3, komponen ialah blok binaan asas kod. Mari buat komponen Vue3 yang mudah. Dalam projek anda, cari folder "src/components" dan buat fail baharu yang dipanggil "HelloWorld.vue".

Tambahkan kod berikut pada "HelloWorld.vue":

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

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
}
</script>

Komponen ini akan mengandungi sifat data ("mesej") dan menggunakannya untuk memaparkan tajuk.

Langkah 7: Gunakan komponen dalam aplikasi Vue3

Sekarang, mari kita gunakan komponen "HelloWorld" yang baru dibuat dalam aplikasi Vue3. Dalam fail "src/App.vue", tambahkan kod berikut pada teg