VueJS

Cara Install Vue CLI (Command Line Interface)

Hallo coder 😃,vue membuat vue cli (command line interface) yaitu tools sederhana untuk scaffolding proyek aplikasi berbasi vue. terkadang kita rumit mengaturan javascript bundler dan semua tools terkait.

vue membuat tools untuk memudahkan kita untuk melakukan semua itu.

pada saat ini vue cli telah mencapai versi 3.x di vue cli 3 kita disediakan user interface berbasis web untuk membuat project. didalamnya terdapat banyak plugin yang bisa kita pakai.

Beberapa plugins yang disediakan antara lain: Typescript, PWA, Vuex, Vue Router, ESLint, unit testing dll.

Install Vue CLI

Sebelumnya anda buat dulu folder vue-project setelah itu masuk ke folder itu lewat terminal, sekarang coba anda ketikan seperti berikut di terminal anda.

Tunggu sampa instalasi selesai, ini akan memakan waktu lama, pastikan anda tersambung internet.

setelah instalasi selesai coba ketikan seperti berikut di terminal yang tadi. untuk mengcek versi.

nanti akan muncul versi vue cli yang kamu install.

Membuat Project

Sekarang kita akan mencoba membuat project di vue cli, Untuk membuat projek baru dengan menggunakan vue-cli ini maka cukup jalankan perintah dengan format berikut. vue create

atau

coba ketikan di terminal seperti berikut vue create myproject setelah kita enter maka akan keluar seperti berikut ini.

Cara Install Vue CLI (Command Line Interface)

Tunggu sampai selesai pastikan anda tersambung internet, jika sudah selesai dan berhasil maka akan keluar seperti ini di terminal.

Cara Install Vue CLI (Command Line Interface)

Berikut ini struktur folder dari project yang dibuat

Cara Install Vue CLI (Command Line Interface)

Sekarang kita akan jalankan projek kita ini. Pada terminal, masuk ke folder myproject kemudian jalankan perintah npm run serve.

Setlah berhasil di jalankan maka akan keluar tampilan berikut, setelah itu ketikan http://localhost:8081/ di browser anda

Cara Install Vue CLI (Command Line Interface)

jika sudah ketikan http://localhost:8081/ maka nampilan default nya akan seperti ini.

Cara Install Vue CLI (Command Line Interface)

Terdapat 3 folder utama yang terinstall yaitu:

  1. node_modules yaitu folder untuk menampung pustaka yan terinstalasi untuk projek ini, terdapat lebih dari 80 pustaka di dalamnya diantaranya: webpack, babel, browserify, eslint, dsb.
  2. src yaitu folder untuk menampung source code kita, seperti component, assets (image, icon), template, store, dsb.
  3. public yaitu folder untuk menampung file index.html atau mount point dari aplikasi kita nanti, ada juga file favicon di sini.

Baca juga pengenalan vue js

www.domainesia.com