Belajar Vue js #3 : Langkah install Vue js

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

Kebutuhan sebelum belajar Langkah install Vue js

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

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

Mulai Instalasi Vue Js.

Buat memulai instalasi Vue Js. pertama silahkan kalian buat Folder tersendiri. Lampau buka Terminal/Cmd Buat diarahkan ke Folder tersebut.

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

1. Ketik Syntax Buat Instalasi

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

atau

Nah setelah selesai. Kalian akan diminta Buat Melakukan beberapa Setting Buat 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 Langkah install vue js ini kita akan Install secara basic saja. Sembari Saya jelaskan sedikit mengenai masing-masing Settingan dari Vue js ini.

1. Pertama adalah Project Name. Terang ya ini adalah nama Project kalian. Eksis beberapa Embargo disini seperti Enggak boleh Guna huruf Investasi, Enggak boleh Eksis 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 ‘Terjamin’ dan lebih banyak peraturannya. Jadi Buat sekarang kita No saja
3. Selanjutnya Buat Add JSX Support kita juga No saja.
4. Berikutnya kita diminta Buat memilih Add Vue Router for Single Page Application development?. Nah ini maksudnya apakah kita mau Membangun sebuah sistem Routing Buat Web kita? disini kita pilih Yes saja. Akan Saya jelaskan Sistem Routing di Artikel selanjutnya.
5. Berikutnya adalah pertanyaan apakah kita mau menambahkan Pinia Buat State Management? nah ini kita No saja.
6. Lampau pilih No juga Buat Vitest for Unit Testing
7. Berikutnya No juga Buat Add Cypres
8. Lampau pilih No Buat Eslint. Eslint ini sebenarnya adalah alat Buat mendeteksi apakah Eksis 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 Buat menjalankan Vue Js kita.

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

Mari kita Praktekkan.

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

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

Hasil

Nah dari Artikel Langkah install Vue Js ini Dapat kita simpulkan kalau Langkah Instalasi Vue js sebenarnya sangat mudah ya. Memang Ketika instalai kita diberi beberapa pillihan tetapi Bahkan pilihan tersebut yang Membangun Vue Js sangat digemari, kita Dapat memilih mau menambahkan sesuatu atau Enggak sesuai keinginan kita.

Nah Tamat disini saja artikel Langkah install Vue Js kita. Kita ketemu Kembali di Artikel selanjutnya