Bagian-1 Belajar Vue JS dengan Vuetify

Seri 1 Vue + Vuetify

Ditengah kesibukan di kampus akhirnya saya sempat2kan untuk belajar vue js.
Sebenarnya sebelum ini saya sudah pernah coba2 fitur vue menggunakan cdn, namun ya itu, tidak dicatat dan akhirnya lupa. (memang ilmu itu mesti di ikat dengan menulis :p)

Kali ini, biar lebih menarik dan semangat belajarnya, maka saya mencoba vue js dengan vuetify yang memiliki banyak komponen dengan tampilan waow (ntar saja penjelasannya terkait vuetify).

Setelah npm terinstall dengan baik, jangan lupa install juga vue-cli.
Eh ya, saya jelasin dulu npm itu apa sih ?
npm atau node package manager merupakan aplikasi untuk menginstall modul-modul javascript seperti jquery, chart, momentjs dan lain-lain (mirip2 composer untuk php). aplikasi npm dijalankan menggunakan command line dengan perintah.

Ø  npm install nama_library

Contohnya :

Ø  npm install jquery

Perintah diatas akan membuat folder dengan nama node_modules dan jquerynya akan diletakkan di folder tersebut.

Kalo npm belum ada, maka silahkan download nodejs di sini https://nodejs.org/dist/v10.13.0/node-v10.13.0-x64.msi , kalo pake windows ya mestinya nginstall nya tinggal klik lalu next next saja.

Setelah npm berjalan dengan baik, berikutnya kita akan menginstall vue-cli, vue-cli bisa di install pake npm atau yarn, contohnya saya menggunakan npm :

Ø  npm install @vue/cli -g

Lalu menginstall webpack untuk pemaketan atau membuat struktur folder dari vuetify :

Ø  vue init vuetifyjs/webpack my-project

Nanti akan ditanya nama project, enter-enter saja atau kalau saya seperti berikut :

Kalo prosesnya sudah selesai, masuk ke folder my-project lalu install library yang dibutuhkan oleh template webpack ini (optional).

Ø  cd my-project

Ø  npm run install

Perintah npm install akan melakukan pengecekkan ke file package.json dan akan menginstall semua library oleh template. Lalu jalankan dengan perintah run dev.

Ø  npm run dev

Kalo sudah selesai maka akan muncul seperti gambar dibawah, dan buka browser di port 8080.

Dan jreng... jadi deh layout menggunakan vuetify,

Vuetify menggunakan webpack memiliki struktur folder berikut :

Di folder src terdapat file dengan nama App.vue, di file inilah kode-kode layout dari vuetify diletakkan, coba saja tambahi sembarang kode html, ntar keliatan kok di tampilannya.

Lalu di src juga ada main.js, di file ini kita dapat mengatur komponen yang akan saya bahas di tulisan saya berikutnya.

Coba buka App.vue dan di bagian paling bawah dalam tag script,coba ganti dengan kode berikut :

export default {  data () {    return {      clipped: false,      drawer: true,      fixed: false,      items: [        {icon: 'dashboard',title: 'Home'},        {icon: 'bubble_chart',title: 'Inspire'}      ],      miniVariant: false,      right: true,      rightDrawer: false,      title: 'Vuetify.js'    }  },  name: 'App'}

Pada kode diatas, saya menambahkan items array dengan menu Home dan icon dashboard.
Jika sudah oke, silahkan gunakan perintah
> npm run build
perintah itu akan membuat folder namanya dist, copy file dist dan file index.html di folder utama, lalu gunakan.