Bagaimana untuk membuat fail vue dalam kod

Vue.js ialah rangka kerja JavaScript popular yang boleh membina antara muka web interaktif dengan cepat. Tidak seperti rangka kerja JavaScript lain, Vue.js menggunakan komponen untuk membina aplikasi. Komponen Vue wujud dalam bentuk fail .vue, yang mengandungi templat, skrip dan gaya Vue. Mari kita lihat cara membuat fail Vue.

Untuk mencipta komponen Vue, anda perlu memasang alat Vue CLI terlebih dahulu. Alat ini secara automatik boleh mencipta projek Vue untuk kami dan menyediakan banyak alatan dan fungsi yang mudah. Mula-mula, masukkan arahan berikut pada baris arahan untuk memasang Vue CLI:

npm install -g @vue/cli

Selepas pemasangan selesai, kita boleh menyemak sama ada Vue CLI berjaya dipasang dengan menggunakan arahan berikut:

vue --version

Jika ia berjaya dipasang , maklumat versi Vue CLI akan dipaparkan. Seterusnya, kita boleh membuat projek baharu menggunakan Vue CLI. Masukkan arahan berikut dalam baris arahan:

vue create my-project

"projek saya" di sini ialah nama projek, anda boleh menukarnya mengikut keperluan. Apabila melaksanakan arahan ini, Vue CLI akan menggesa anda untuk memilih pratetap, seperti Lalai, Secara Manual, PWA, Mudah, dsb. Memilih pratetap Lalai akan menjana projek Vue secara automatik yang mengandungi tetapan lalai. Memilih pratetap secara manual memerlukan anda memilih pelbagai tetapan secara manual.

Setelah projek Vue berjaya dibuat, anda boleh menggunakan Vue CLI untuk menjalankan projek. Masukkan arahan berikut pada baris arahan:

cd my-project
npm run serve

Perintah ini akan memulakan pelayan setempat Lawati http://localhost:8080/ dalam penyemak imbas untuk melihat kesan berjalan projek Vue.

Sekarang kita telah mencipta projek Vue, mari kita buat fail .vue. Cipta fail baharu dalam direktori src/komponen dan namakannya MyComponent.vue. Masukkan kod berikut dalam fail:

<template>
   <div>
      <h1>Hello, World!</h1>
   </div>
</template>

<script>
export default {
   name: 'MyComponent'
}
</script>

<style>
h1 {
   color: red;
}
</style>

Fail .vue ini mengandungi tiga bahagian: