Belajar Vue js #3 : Cara install Vue js

Setelah di artikel sebelumnya kita belajar mengenai Vue Directive. Disini kita akan belajar Cara install Vue js dengan sebenar-benarnya, jadi gapakai Script dari Luar lagi ya. Tapi kita akan mulai bertemu dengan File berekstensi .vue.

Kebutuhan sebelum belajar Cara install Vue js

Sebelum teman-teman mulai Install Vue js. Pastikan terlebih dahulu kalian sudah menginstall Node di Komputer/Laptop kalian. Node / Node js ini akan digunakan untuk Men-Download Package Vue Js kita. Cara Cek nya mudah sekali, buka saja terminal/Cmd lalu ketik node -v.

Nah disini punya Mimin sudah terinstall Node versi 16.14.0 ya. Kalau kalian belum ada, bisa download disini https://nodejs.org/en/download/. Silahkan pilih sesuai Versi dan Sistem Operasi kalian ya.

Mulai Instalasi Vue Js.

Untuk memulai instalasi Vue Js. pertama silahkan kalian buat Folder tersendiri. Lalu buka Terminal/Cmd untuk diarahkan ke Folder tersebut.

Nah kalau Mimin. Mimin arahkan ke Folder E:/Belajar. Nah Folder Belajar ini Mimin akan praktekan Cara install Vue js.

1. Ketik Syntax untuk Instalasi

Nah untuk instalasi ini kalian bisa memilih untuk memakai yarn atau npm. Kalau di Tutorial ini Mimin akan memilih menggunakan npm saja.

npm init vue@latest

atau

yarn global vue@latest

Nah setelah selesai. Kalian akan diminta untuk Melakukan beberapa Setting untuk Web Apps kalian. Kurang lebih isinya seperti dibawah ini

1. Project name: …
2. Add TypeScript? … No / Yes
3. Add JSX Support? … No / Yes
4. Add Vue Router for Single Page Application development? … No / Yes
5. Add Pinia for state management? … No / Yes
6. Add Vitest for Unit testing? … No / Yes
7. Add Cypress for both Unit and End-to-End testing? … No / Yes
8. Add ESLint for code quality? … No / Yes
9. Add Prettier for code formatting? … No / Yes

2. Setting Vue Js

Nah sekarang kita akan mulai setting Vue Js kita. Di Artikel Cara install vue js ini kita akan Install secara basic saja. Sambil aku jelaskan sedikit mengenai masing-masing Settingan dari Vue js ini.

1. Pertama adalah Project Name. Jelas ya ini adalah nama Project kalian. Ada beberapa larangan disini seperti tidak boleh pakai huruf Kapital, tidak boleh ada Spasi, dll. Nah nama Project yang kalian input ini nanti akan jadi Nama Folder Vue Js kalian
2. Berikutnya adalah Add Typescript?. Nah Typescript ini adalah Bahasa Javascript yang lebih ‘aman’ dan lebih banyak peraturannya. Jadi untuk sekarang kita No saja
3. Selanjutnya untuk Add JSX Support kita juga No saja.
4. Berikutnya kita diminta untuk memilih Add Vue Router for Single Page Application development?. Nah ini maksudnya apakah kita mau membuat sebuah sistem Routing untuk Web kita? disini kita pilih Yes saja. Akan aku jelaskan Sistem Routing di Artikel selanjutnya.
5. Berikutnya adalah pertanyaan apakah kita mau menambahkan Pinia untuk State Management? nah ini kita No saja.
6. Lalu pilih No juga untuk Vitest for Unit Testing
7. Berikutnya No juga untuk Add Cypres
8. Lalu pilih No untuk Eslint. Eslint ini sebenarnya adalah alat untuk mendeteksi apakah ada Error di Codingan Javascript kalian
9. Dan Selesai, kalian sudah selesi install Vue Js kalain dengan settingan Miminalis

3. Menjalankan Vue Js

Berikutnya kita tinggal menjalankan 3 Syntax dibawah itu untuk menjalankan Vue Js kita.

1. cd belajar-vue untuk membuka Folder tempat instalasi kita
2. npm install untuk menambahkan Package NPM di Web Apps kita
3. lalu npm run dev untuk menjalankan Website kita

Mari kita Praktekkan.

Saat kalian menjalankan Web Apps ini. kalian akan mendapatkan tampilan Terminal/Cmd seperti ini

Nah ini tandanya Vue js kalian sudah berjalan. tinggal buka di web dengan Url sesuai di Local diatas. Misal disini berati http://localhost:3000.

Dan selesai. Kita sudah berhail belajar Cara install Vue js.

Kesimpulan

Nah dari Artikel Cara install Vue Js ini bisa kita simpulkan kalau cara Instalasi Vue js sebenarnya sangat mudah ya. Memang saat instalai kita diberi beberapa pillihan tetapi justru pilihan tersebut yang membuat Vue Js sangat digemari, kita bisa memilih mau menambahkan sesuatu atau tidak sesuai keinginan kita.

Nah sampai disini saja artikel Cara install Vue Js kita. Kita ketemu lagi di Artikel selanjutnya