Prasyarat
Sebelum memulai dengan ini, ada beberapa prasyarat yang harus Anda miliki:
- Pengetahuan dasar tentang HTML, CSS, dan JavaScript.
- simpul.js diinstal pada Sistem Operasi Anda.
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/cliPada 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-proyekPastikan 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 proyekDi direktori proyek, mulai aplikasi Vue dengan mengetikkan perintah yang diberikan di bawah ini di terminal:
$npm menjalankan servisSetelah 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 , Setelah berhasil membuat komponen, mari kita lihat cara mengimpornya dan menggunakannya di beberapa halaman atau komponen lain. Sintaks impor untuk mengimpor komponen di komponen Vue lainnya cukup sederhana dan mudah; Anda hanya perlu mengimpor komponen di dalam tag skrip menggunakan sintaks ES6 seperti yang ditunjukkan pada cuplikan kode di bawah ini: Setelah mengimpor komponen dengan sukses, yang perlu Anda lakukan adalah membuat objek dengan nama komponen dan berikan nama di komponen objek seperti gambar di bawah ini: Sekarang, Anda dapat menggunakannya di mana saja di dalam label komponen. Misalnya, jika kita ingin mengimpornya ke dalam Aplikasi.vue, sintaksnya akan seperti ini: Setelah menyelesaikan semua pengaturan ini, simpan setiap file yang telah Anda ubah dan kembali ke browser Anda dapat menyaksikan di tangkapan layar terlampir bahwa komponen berhasil diimpor dan sangat baik di halaman web. Membuat, mengimpor, dan menggunakan komponen di dalam komponen lain dari Vue.js semudah mengatakannya. Dalam postingan ini, kita akan membahas seluruh proses pembuatan, penambahan, dan penggunaan komponen di Vue.js. Mengimpor komponen di Vue
Kesimpulan