Belajar Front End Vue.Js

Buka dan Amatilah File Template GUI yang telah disediakan

Tahap 1. Persiapan 

buka CMD

Bukalah Folder Sumber sesuai dengan folder anda, Tuliskan perintah berikut pada Command Prompt

cd c:\xampp\htdocs\SERVER_MODULE

Tahap 2 Install project Vue.js

Tulisan Perintah berikut pada Command / Terminal

vue create frontend

Pilih mannualy Select tekan enter

Pilih Router dan Vuex menggunakan tombol spasi

Tekan Enter terus untuk Melanjutkan

Tunggu sampai proses berhasil

buka Folder frontend di Terminal

cd frontend

Jalankan Service menggunakan perintah berikut

npm run serve

 tunggu Proses sampai running

Buka Browser sesuai alamat akses yang didapat

Tahap 3 Membuat View

Copy Folder Asset dari Folder Template-GUi Ke Folder public pada folder project frontend

Buka Folder Frontend pada Visual Studio Code

Buatlah File sesuai dengan template Gui yang disediakan

Buat file Login.vue di folder src/views

tuliskan tag berikut pada editor :

Buatlah File View lain sesuai dengan tempate gui yang disediakan

Buka File Template GUI yang disediakan contoh: Halaman Login

copy seluruh source code pada file tersebut

paste ke file Login.Vue pada folder views

Lakukan Copy dan Paste sesuai dengan file tempate gui yang disediakan

Buka File App.vue

hapus seluruh isi pada file App.vue dan tuliskan script berikut ini

<template>
<RouterView />
</template>

Buka File index.js pada folder router tambahkan kode berikut untuk setiap view yang dibuat

Conth View Login :
{
path: '/login',
name: 'login',
component: () => import('../views/LoginView.vue')
}

Pastikan Setiap Router yang dibuat sebanyak View yang dibuat dan pastikan setiap router dipisah degan huru koma