Vue

Cara Membuat Komponen di Vue CLI

Cara Membuat Komponen di Vue CLI
Vue.js menyediakan Vue CLI untuk menyediakan perintah vue di dalam terminal untuk membuat perancah proyek baru Vue . dengan cepat.js dan jalankan Vue.proyek js menggunakan melayani perintah. Vue.js juga menyediakan antarmuka pengguna grafis untuk mengelola proyek menggunakan vue ui perintah. Vue.js dikenal karena menggabungkan dua kerangka kerja yang spektakuler, Angular dan React, menggunakan sintaks templating Angular dan metode props dari React. Ini menyediakan cara HTML dan CSS tradisional untuk membuat komponen, dan dalam posting ini, kita akan melalui proses pembuatan dan pemahaman komponen di Vue CLI.

Prasyarat

Sebelum memulai dengan ini, ada beberapa prasyarat yang harus Anda miliki:

Verifikasi instalasi Vue CLI

Pertama-tama, pastikan Anda telah menginstal Vue CLI terbaru di sistem Anda. Anda dapat memverifikasi apakah Vue CLI diinstal atau tidak di sistem kami dengan mengetikkan perintah yang diberikan di bawah ini:

$ vue --versi

Jika terinstal, Anda akan memiliki versi terbaru dari Vue CLI yang dicetak di terminal. Jika tidak, jika tidak diinstal, Anda dapat menggunakan manajer paket NPM atau manajer paket Yarn untuk menginstal Vue CLI. Untuk menginstalnya menggunakan manajer paket NPM, Anda perlu mengetikkan perintah yang diberikan di bawah ini di terminal:

$npm install -g @vue/cli

Pada perintah di atas, -g flag digunakan untuk menginstal Vue CLI secara global di sistem Anda.

Setelah Vue CLI terinstal sepenuhnya, Anda dapat memverifikasinya dengan mengetikkan perintah yang diberikan di bawah ini:

$ vue --versi

Anda akan memiliki versi terbaru dari Vue CLI di output.

Pembuatan Proyek

Sekarang, misalkan Anda akan mengatur seluruh proyek Vue sendiri. Dalam hal ini, bukanlah pilihan yang baik untuk menemukan kembali roda; proyek Vue dapat dibuat menggunakan vue perintah di terminal karena Vue CLI menyediakan template yang sudah dibuat untuk memulai dengan proyek Vue.

Untuk membuat aplikasi Vue, cukup ketik perintah yang diberikan di bawah ini di terminal:

$vue buat nama-proyek

Pastikan untuk mengganti Nama Proyek dengan nama proyek yang Anda inginkan dan tekan Memasukkan.

Setelah beberapa detik, itu akan meminta memilih preset default atau memilih beberapa fitur secara manual.

Jika Anda ingin memiliki beberapa fitur khusus, pilih “Pilih fitur secara manual,” tekan Enter, dan Anda akan diminta dengan beberapa opsi seperti memilih versi Vue, menambahkan Vuex, atau Router. Pilih opsi yang Anda inginkan dan tekan Memasukkan.

Jawab beberapa pertanyaan konfigurasi yang diperlukan dan simpan preset untuk proyek mendatang.

Proyek Vue akan dibuat sebentar lagi menggunakan Vue CLI, dan Anda dapat memulai pengembangan di Vue.js.

Memulai aplikasi Vue

Setelah proyek Vue dibuat, Anda dapat memulai proyek dengan terlebih dahulu menavigasi ke direktori proyek menggunakan perintah cd di terminal:

$cd nama proyek

Di direktori proyek, mulai aplikasi Vue dengan mengetikkan perintah yang diberikan di bawah ini di terminal:

$npm menjalankan servis

Setelah penyalaan aplikasi Vue, kunjungi http://localhost:8080 di bilah alamat browser favorit Anda:

Anda akan memiliki layar Selamat Datang di Vue.proyek js.

Pembuatan Komponen di Vue

Untuk membuat komponen dalam proyek Vue, buat .vue file di komponen folder dan berikan nama pilihan Anda.

Sekarang, di yang baru dibuat ini .vue file, Anda dapat menulis HTML, Javascript, dan CSS di