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:

95f38ed4547295371de63f3f8da9b2af: Bahagian skrip mengandungi kod JavaScript untuk memaparkan logik komponen.

c9ccee2e6ea535a969eb3f532ad9fe89: Bahagian gaya mengandungi kod CSS untuk memaparkan gaya komponen.

Dalam fail .vue, gunakan {} eksport lalai untuk mengeksport komponen Vue. Dalam contoh ini, kami mengeksport komponen Vue bernama "MyComponent". Kami juga boleh menentukan prop, data, pengiraan, kaedah dan sifat dan kaedah lain dalam komponen Vue untuk komponen.

Akhir sekali, kita perlu menggunakan komponen MyComponent ini dalam komponen lain. Dalam komponen Vue lain, kami boleh memperkenalkan komponen MyComponent seperti berikut:

<template>
   <div>
      <my-component></my-component>
   </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
   components: {
      'my-component': MyComponent
   }
}
</script>

Di sini kami mengimport komponen MyComponent ke dalam komponen Vue lain melalui kata kunci import dan mendaftarkannya sebagai subkomponen melalui atribut komponen. Komponen ini boleh dipaparkan dengan menggunakan teg b98f2d1b8b5d79f8c1b053de334aa7b5

Di atas ialah langkah mudah untuk mencipta komponen Vue. Cipta projek Vue menggunakan Vue CLI, kemudian buat fail .vue, tulis kod dan gunakannya dalam komponen Vue yang lain. Model pembangunan berasaskan komponen Vue.js membolehkan pembangun membina aplikasi dengan lebih mudah dan cepat, serta meningkatkan kebolehgunaan semula kod dan modulariti.

Atas ialah kandungan terperinci Bagaimana untuk membuat fail vue dalam kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!