Untuk artikel kali ini kita akan belajar bagaimana cara membuat template sederhana menggunakan Vuejs, dimana yang kita gunakan ini akan adalah cli dari vuejs, jadi saya harap teman-teman sudah tau ya bagaimana cara menggunakan vue cli, jika belum, silahkan teman-teman lihat artikel saya sebelumnya bagaimana cara menginstall vue cli, oke untuk artikel kali simak terus ya teman-teman.

Cara membuat template sederhana menggunakan Vuejs dan Ketika teman-teman pertama baru kenal cli pasti teman-teman bingung bagaimana kita menulis lembar kerja kita, oke jadi untuk struktur kali ini, saya akan memisahkan bagian-bagian seperti header, menu, article, dan footer, jadi disini saya membuatnya terpisah, dan setiap bagian itu saya akan masukan kedalam folder components, seperti ini:

cara membuat template sederhana menggunakan Vuejs

dan jangan lupa pada app.vuenya kita import lalu kita buat komponennya seperti ini:

cara membuat template sederhana menggunakan Vuejs

jadi yang atas itu adalah sebuah letak dari setiap posisinya, yang bawah itu adalah import dari setiap komponennya, dan yang garis bawah itu untuk membuat komponen tagnya.

oke karena disini jika saya lihatkan semua komponen header sampai footer itu terlalu banyak ya, maka saya akan mencontohkan satu tag saja ya, yaitu tag header, untuk yang lain silahkan teman-teman coba sendiri, langsung saja silahkan teman-teman masuk kedalam komponen header.vuenya silahkan liat didalam templatenya saya membuat seperti ini:

Jika teman-teman lihat struktur di atas, judul dan file gambar itu saya dapatkan dari data, dan perlu di ingat ketika kita mengambil file gambar dari data teman-teman harus import ya, jadi gak bisa langsung saja menuliskan nama file gambar itu di dalam gambar, nanti tidak akan tampil,seperti ini, ini scriptnya:

jadi saya menyimpan gambarnya ke dalam folder images, dan saya import terlebih dahulu, dan sedikit saya style seperti ini:

Oke jika teman-teman berhasil maka akan tampil seperti ini, silahkan teman-teman npm run dev:

cara membuat template sederhana menggunakan Vuejs

dan untuk tampilan yang lain silahkan teman-teman lihat gambar jadi saya seperti ini:

cara membuat template sederhana menggunakan Vuejs

oke silahkan untuk konten yang lain silahkan teman-teman buat seperti di atas, jika ada pertanyaan silahkan komentar saja di bawah ini, dan saya rasa cukup sampai disini belajar kita tentang cara membuat template sederhana menggunakan Vuejs, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.