Panduan Instalasi Vue

Di era digital yang berkembang pesat, peran teknologi dalam kehidupan sehari-hari menjadi semakin penting. Inovasi-inovasi baru terus bermunculan yang menawarkan beragam solusi untuk meningkatkan produktivitas, efisiensi, dan kenyamanan manusia.

Tujuan artikel ini adalah untuk mempertimbangkan dampak positif perkembangan teknologi di berbagai bidang, mulai dari pendidikan, bisnis, hingga kesehatan, serta tantangan yang harus dihadapi dalam perubahan tersebut.

Melalui pembahasan yang mendalam, kami berharap artikel ini dapat memberikan wawasan dan pemahaman tentang bagaimana mengoptimalkan teknologi untuk membawa perubahan positif dalam kehidupan masyarakat.

---

Langkah-langkah Instalasi Vue 3 di Windows

Install Node.js dan npm

Vue membutuhkan Node.js dan npm (Node Package Manager) agar berfungsi. Unduh dan instal Node.js dari nodejs.org. Secara otomatis, npm akan terinstal bersama Node.js.

Setelah instalasi, verifikasi dengan menjalankan perintah berikut di Command Prompt (cmd) atau terminal:

node -v
npm -v

Ini akan menampilkan versi Node.js dan npm yang diinstal.

Install Vue CLI

Vue CLI (Command Line Interface) digunakan untuk membuat proyek Vue dengan mudah. Jalankan perintah berikut di Command Prompt (cmd):

npm install -g @vue/cli

Setelah instalasi, verifikasi dengan:

vue --version

Ini akan menampilkan versi Vue CLI yang terinstal.

Buat Project Vue

Untuk membuat project baru, jalankan perintah berikut di Command Prompt:

vue create nama-project

Anda akan diminta memilih preset konfigurasi. Untuk Vue 3, pilih opsi Vue 3.x atau “Default Vue 3” saat diminta.

Jalankan Proyek

Setelah project dibuat, masuk ke direktori proyek dan jalankan aplikasi dengan perintah berikut:

cd nama-project
npm run serve

Aplikasi Vue Anda akan berjalan di server lokal, biasanya di http://localhost:8080/.

---

Langkah-langkah Instalasi Vue 3 di Linux

Instal Node.js dan npm

Di Linux, Anda dapat menggunakan apt atau yum (tergantung distribusi) untuk menginstal Node.js. Misalnya, di distribusi berbasis Ubuntu/Debian:

sudo apt update
sudo apt install nodejs npm

Verifikasi instalasi dengan menjalankan:

node -v
npm -v

Di distribusi berbasis RedHat/Fedora:

sudo yum install nodejs npm

Instal Vue CLI

Setelah Node.js dan npm terinstal, instal Vue CLI dengan perintah:

sudo npm install -g @vue/cli

Verifikasi instalasi Vue CLI dengan:

vue --version

Buat Project Vue

Untuk membuat project baru, jalankan perintah berikut di terminal:

vue create nama-project

Pilih preset Vue 3.x saat diminta.

Jalankan Proyek

Masuk ke direktori proyek dan jalankan aplikasi:

cd nama-project
npm run serve

Server lokal Vue akan berjalan di http://localhost:8080/.

---

Contoh Project Vue 3 Sederhana

Setelah berhasil membuat project, Anda akan melihat struktur folder seperti berikut:

nama-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
├── babel.config.js
└── README.md

Buka file App.vue di folder src/.

Anda bisa mengganti konten dengan kode berikut untuk membuat aplikasi Vue 3 sederhana:

<template>
  <div id="app">
    <h1>Hello, Vue 3!</h1>
    <Counter />
  </div>
</template>

<script>
import Counter from './components/Counter.vue'

export default {
  name: 'App',
  components: {
    Counter
  }
}
</script>

<style>
#app {
  text-align: center;
  margin-top: 40px;
}
</style>

Tambahkan Komponen Counter.vue di dalam folder src/components/:

<template>
  <div>
    <p>Counter: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

<style scoped>
button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}
</style>

Jalankan kembali aplikasi dengan:

npm run serve

Sekarang Anda memiliki aplikasi Vue 3 sederhana yang menampilkan tombol untuk mengubah nilai counter.

Sebagai penutup, dengan mengikuti langkah-langkah instalasi Vue.js yang telah dijelaskan, baik di Windows maupun Linux, Anda kini siap untuk memulai pengembangan aplikasi modern menggunakan Vue 3. Semoga panduan ini membantu Anda memahami proses instalasi dan memulai proyek pertama Anda dengan lebih mudah, sehingga Anda dapat lebih produktif dalam membangun aplikasi berbasis JavaScript yang interaktif dan responsif.