Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara membuat Rest API menggunakan framework Express.js, sekarang kita akan lanjutkan bagaimana cara melakukan installasi dan membuat project baru di Vue.js.
Apa itu Vue.js ?
Vue (diucapkan / vjuː /, seperti view) adalah kerangka kerja progresif untuk membangun antarmuka pengguna. Tidak seperti kerangka kerja monolitik lainnya, Vue.js dirancang dari bawah ke atas agar dapat diadopsi secara bertahap. Libarary inti difokuskan pada lapisan tampilan saja, dan mudah diambil dan diintegrasikan dengan library lain atau proyek yang sudah ada. Di sisi lain, Vue.js juga sangat mampu membuat Aplikasi SPA yang canggih bila di kombinasikan dengan library pendukung, seperti Vue Router dan lain-lain.
Vue.js pertama kali dibangun oleh Evan You pada tahun 2013, dimana saat itu beliu masih bekerja sebagai Creative Technologist di Google Creative Labs. Setelah dua tahun di Google, beliau pindah di Meteor, di mana membangun kerangka kerja Javascript open source yaitu Meteor Js. Setelah itu beliau fokus di pengembangan Vue.js sampai sekarang.
Setelah berkenalan sedikit dengan Vue.js, maka sekarang kita akan lanjutkan untuk membuat project baru di dalam Vue.js. Untuk menggunakan Vue.js, kita terlebih dahulu menginstall Node.js dan NPM.
Langkah 1 - Installasi Node.js
Untuk installasinya silahkan bisa mengunjungi situs resminya di https://nodejs.org/ dan silahkan diinstall sesuai dengan sistem operasi yang digunakan. Untuk memastikan apakah Node.js sudah terinstall di dalam komputer, kita bisa menjalankan perintah berikut ini di dalam terminal/CMD :
node -v
npm -v
Langkah 2 - Installasi Vue CLI
Vue CLI merupakan standart tool yang digunakan untuk proses pengembangan aplikasi Vue.js agar lebih mudah dalam memanajemen library dan konfigurasi. Silahkan jalankan perintah di bawah ini untuk menginstall Vue CLI secara global di dalam komputer.
npm install -g @vue/cli
Setelah installasi selesai, sekarang kita bisa memerika versi Vue CLI yang kita gunakan dengan perintah seperti berikut ini :
vue --version
Langkah 3 - Membuat Project Vue.js
Setelah berhasil melakukan installasi Vue CLI secara global di dalam komputer, sekarang kita akan belajar bagaimana cara membuat project Vue.js menggunakan Vue CLI tersebut.
Silahkan masuk ke dalam folder dimana teman-teman akan menyimpan project-nya, kemudian jalankan perintah berikut ini di dalam terminal/CMD :
vue create frontend-vue
Perintah di atas akan membuat project Vue.js baru dengan nama frontend-vue. Jika muncul pilihat preset, silahkan pilih Default (Vue 3) ( [Vue 3] babel, eslint ).
Silahkan tunggu proses installasinya sampai selesai.
Langkah 4 - Menjalankan Project Vue.js
Setelah proses installasi selesai, sekarang kita akan belajar bersama-sama bagaimana cara menjalankan project Vue.js-nya. Silahkan jalankan perintah berikut ini di dalam terminal/CMD :
cd frontend-vue
Perintah cd digunakan untuk melakukan navigasi ke dalam sebuah folder, di atas kita akan menuju ke dalam folder frontend-vue. Jika sudah berada di dalam project-nya. Sekarang silahkan jalankan perintah berikut ini di dalam terminal/CMD :
npm run serve
Jika berhasil, maka project Vue.js akan dijalankan di dalam localhost menggunakan port 8080, kurang lebih seperti berikut ini :
Sekarang, kita bisa melihat hasilnya di dalam web browser. Silahkan buka link berikut ini http://localhost:8080, jika berhasil maka kita akan mendapatkan hasil seperti berikut ini :
Sampai disini pembahasan kita tentang bagaimana cara membuat project Vue.js baru. Di artikel selanjutnya kita akan belajar bagaimana cara installasi dan konfigurasi Vue Router di dalam project Vue.js dan kita akan belajar untuk menambahkan beberapa library tambahan seperti Axios dan lain-lain.
Terima Kasih