Berikut adalah panduan untuk menginstal Vue.js di macOS. Vue.js adalah framework JavaScript progresif untuk membangun antarmuka pengguna. Proses instalasi cukup sederhana dan dapat dilakukan dengan bantuan Node.js dan npm (Node Package Manager).
1. Menginstal Node.js dan npm
Vue.js membutuhkan Node.js dan npm. Node.js adalah runtime JavaScript yang memungkinkan Anda menjalankan JavaScript di luar browser, sedangkan npm adalah pengelola paket untuk Node.js.
Instal Node.js dan npm menggunakan Homebrew:
Jika Anda belum menginstal Homebrew, ikuti langkah-langkah untuk menginstalnya seperti pada panduan sebelumnya.
Buka Terminal dan ketik perintah berikut untuk menginstal Node.js:
1 | brew install node |
Verifikasi Instalasi Node.js dan npm:
Setelah instalasi selesai, Anda dapat memeriksa versi Node.js dan npm untuk memastikan keduanya terinstal dengan benar:
1 2 | node -v npm -v |
Ini akan menampilkan versi Node.js dan npm yang diinstal.
2. Menginstal Vue CLI
Vue CLI adalah alat yang digunakan untuk menginisialisasi proyek Vue.js dan menyediakan alat pengembangan modern.
Instal Vue CLI secara global:
Ketik perintah berikut di Terminal untuk menginstal Vue CLI secara global:
1 | npm install -g @vue/cli |
Verifikasi Instalasi Vue CLI:
Setelah instalasi selesai, periksa versi Vue CLI yang diinstal dengan perintah:
1 | vue --version |
Ini akan menampilkan versi Vue CLI yang diinstal.
3. Membuat Proyek Vue.js Baru
Setelah Vue CLI terinstal, Anda dapat membuat proyek Vue.js baru.
Inisialisasi Proyek:
Navigasi ke direktori tempat Anda ingin membuat proyek baru dan ketik perintah:
1 | vue create nama-proyek-anda |
Gantilah nama-proyek-anda dengan nama proyek yang Anda inginkan.
Mengikuti Wizard Konfigurasi:
Vue CLI akan menampilkan beberapa pilihan konfigurasi. Anda dapat memilih default atau menyesuaikannya sesuai kebutuhan. Pilihan termasuk memilih preset, pengaturan Babel, linting, dan lainnya.
Navigasi ke Direktori Proyek:
Setelah proyek dibuat, masuk ke direktori proyek:
1 | cd nama-proyek-anda |
4. Menjalankan Proyek Vue.js
Menjalankan Server Pengembangan:
Di dalam direktori proyek Anda, jalankan perintah berikut untuk memulai server pengembangan:
1 | npm run serve |
Akses Aplikasi di Browser:
Anda akan melihat output di terminal yang menunjukkan URL tempat aplikasi Anda berjalan, biasanya http://localhost:8080. Buka URL ini di browser untuk melihat aplikasi Vue.js Anda yang baru dibuat.
5. Membangun Proyek untuk Produksi
Setelah selesai mengembangkan dan siap untuk deployment, Anda dapat membangun proyek dengan perintah:
1 | npm run build |