VueJs-#07 Membuat Project Menggunakan Vue CLI

Vue CLI (command line interface) yaitu tools sederhana untuk scaffolding proyek aplikasi berbasis vue. Terkadang kita mengalami kesulitan untuk mengatur javascript bundler dan semua tools terkait.

Dengan menggunakan Vue CLI ini, maka web yang dibuat menjadi mode Single Page Application (SPA) , bisa menggunakan komponen dengan format file .vue , dan juga beberapa fitur tambahan dengan adanya Webpack tadi. Sintaks JavaScript yang dipakai pun bisa menggunakan ES2015 ke atas atau ES6 , sehingga kode menjadi ringkas dan lebih rapi.

Install Vue CLI

Proses instalasinya cukup mudah dengan menggunakan NPM dari Node.js. Sebelumnya anda buat dulu folder vue-project setelah itu masuk ke folder itu lewat terminal, sekarang coba anda ketikan seperti berikut di terminal anda.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

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.

vue --version

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 myproject

Terdapat 3 folder utama yang terinstall yaitu:

cd myproject
npm run serve

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

  1. node_modules yaitu folder untuk menampung pustaka yang 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>