Mencipta dan Menjalankan Projek Vue.js dengan ServBay

Vue.js merupakan rangka kerja JavaScript progresif yang popular untuk membina antara muka pengguna. Ia mudah digunakan, fleksibel dan berprestasi tinggi, sangat sesuai bagi pembangunan aplikasi satu halaman (SPA). ServBay ialah persekitaran pembangunan web tempatan yang mantap, menawarkan sokongan Node.js yang mudah, serasi dengan macOS dan Windows, menjadikannya platform yang ideal untuk pembangunan Vue.js.

Panduan ini menerangkan secara terperinci bagaimana memanfaatkan ekosistem ServBay untuk mencipta projek Vue.js dari awal, dan mengaksesnya dalam mod pembangunan serta produksi.

Apa Itu Vue.js?

Vue.js ialah rangka kerja JavaScript progresif untuk membina antara muka pengguna. Berbeza daripada rangka kerja berskala besar lain, Vue direka berasaskan prinsip pengembangan secara bertahap dari bawah. Inti perpustakaan Vue hanya fokus pada lapisan tampilan, menjadikannya mudah dikuasai dan senang digabungkan dengan perpustakaan pihak ketiga atau projek sedia ada. Vue 3 ialah versi terkini, memperkenalkan banyak ciri baharu dan penambahbaikan, termasuk prestasi yang dipertingkatkan, saiz paket yang lebih kecil dan sokongan TypeScript yang lebih baik.

Ciri Utama dan Kelebihan Vue 3

• API Komposisi (Composition API): Pengurusan logik kod menggunakan gabungan fungsi, memudahkan penyelenggaraan dan penggunaan semula kod komponen berskala besar.
• Peningkatan Prestasi: Vue 3 memanfaatkan objek Proxy untuk sistem reaktif dan mengoptimumkan algoritma virtual DOM, menghasilkan prestasi yang jauh lebih baik.
• Saiz Paket Lebih Kecil: Dengan teknologi Tree-shaking, inti Vue 3 adalah lebih ringan dan memuat dengan lebih pantas.
• Sokongan TypeScript Lebih Baik: Vue 3 menyediakan definisi jenis TypeScript yang lebih komprehensif, memudahkan pembangunan aplikasi Vue dengan TypeScript.
• Penambahbaikan Kitaran Hayat Komponen: Pelbagai hook baharu dan fungsi Setup menjadikan logik komponen lebih jelas dan terurus.

Menggunakan Vue 3 membolehkan pembangun membina aplikasi web moden yang responsif dengan lebih cekap.

Mencipta dan Menjalankan Projek Vue.js di ServBay

Dalam artikel ini, kita akan menggunakan persekitaran Node.js yang disediakan oleh ServBay untuk mencipta dan menjalankan projek Vue.js. Fungsi Laman Web ServBay akan digunakan untuk konfigurasi pelayan web, serta akses tempatan melalui proksi balikan dan penyajian fail statik.

Prasyarat

Sebelum memulakan, pastikan anda memenuhi perkara berikut:

1. Pemasangan ServBay: ServBay telah berjaya dipasang sebagai persekitaran pembangunan tempatan.
2. Pemasangan Pakej Node.js: Node.js telah dipasang melalui pengurusan pakej ServBay. Untuk langkah-langkah terperinci, rujuk Cara Memasang & Menggunakan Node.js dalam ServBay.

Mencipta Projek Vue.js

1. Inisialisasi Projek

   Buka aplikasi terminal anda. ServBay mengesyorkan supaya projek laman web disimpan dalam direktori lalai. Masuk ke direktori tersebut dan jalankan perintah npm create vue@latest untuk memulakan projek Vue.js yang baru. Pilihan @latest memastikan anda menggunakan versi terkini CLI atau create-vue, biasanya membina projek Vue 3.

   macOS:

   cd /Applications/ServBay/www
   npm create vue@latest

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   Ikuti arahan pada terminal untuk menamakannya (disyorkan: servbay-vue-app) serta memilih ciri seperti TypeScript, Vue Router, Pinia dan lain-lain mengikut keperluan. Contoh konfigurasi:

   ✔ Nama projek: … servbay-vue-app
   ✔ Tambah TypeScript? … No # Pilih Yes atau No mengikut keperluan
   ✔ Tambah Sokongan JSX? … No # Pilih Yes atau No
   ✔ Tambah Vue Router untuk pembangunan SPA? … Yes # Disyorkan Yes
   ✔ Tambah Pinia untuk pengurusan state? … No # Pilih Yes atau No
   ✔ Tambah Vitest untuk Ujian Unit? … No # Pilih Yes atau No
   ✔ Tambah Penyelesaian Ujian End-to-End? … No # Pilih Yes atau No
   ✔ Tambah ESLint untuk kualiti kod? … Yes # Disyorkan Yes
   ✔ Tambah Prettier untuk format kod? … Yes # Disyorkan Yes
   ✔ Tambah pelanjut Vue DevTools 7 untuk debugging? (eksperimental) … No # Pilih Yes atau No

2. Pasang Pergantungan

   Setelah projek diinisialisasi, masuk ke direktori projek servbay-vue-app dan jalankan npm install untuk memasang semua pakej pergantungan yang diperlukan.

   cd servbay-vue-app
   npm install

Ubah Kandungan Contoh Projek (Opsional)

Untuk menguji sama ada projek anda berjalan dengan baik, anda boleh mengubah fail src/App.vue supaya memaparkan "Hello ServBay!" yang ringkas.

Buka fail src/App.vue dalam folder projek dan ubah kandungannya seperti berikut:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Ini adalah aplikasi Vue.js yang dijalankan melalui ServBay.</p>
  </div>
</template>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Tetapan Persekitaran Pembangunan (Menggunakan Proksi Balikan)

Semasa mod pembangunan, projek Vue biasanya menjalankan pelayan pembangunan tempatan (Vite atau Webpack) yang menyokong ciri hot module reload (HMR) untuk memudahkan pembangunan. ServBay boleh memetakan domain tempatan kepada alamat serta port pelayan pembangunan melalui konfigurasi proksi balikan.

1. Jalankan Pelayan Pembangunan

   Dari direktori utama projek, jalankan perintah berikut untuk memulakan pelayan pembangunan. Gunakan argumen --port untuk menentukan port (contoh: 8585), pastikan ia tidak digunakan oleh aplikasi lain.

   npm run dev -- --port 8585

   Terminal akan menunjukkan pelayan aktif dan mendengar pada port yang ditetapkan, contohnya http://localhost:8585.

2. Konfigurasi Proksi Balikan Laman Web ServBay

   Buka aplikasi ServBay dan pergi ke tetapan Laman Web. Tambah konfigurasi laman baru dan pilih jenis Proksi Balikan:

   • Nama: My first Vue dev site (atau sebarang nama mudah dikenal pasti)
   • Domain: servbay-vue-dev.servbay.demo (atau domain .servbay.demo lain pilihan anda)
   • Jenis laman web: Proksi Balikan
   • Alamat IP proksi balikan: 127.0.0.1
   • Port proksi balikan: 8585 (sama seperti port pelayan pembangunan)

   Simpan konfigurasi. ServBay akan mengemaskini tetapan pelayan webnya (Caddy atau Nginx) untuk memproksi trafik ke servbay-vue-dev.servbay.demo terus ke http://127.0.0.1:8585.

   Untuk langkah lebih terperinci tentang bagaimana menambah laman pembangunan Node.js di ServBay, rujuk Menambah Laman Web Pembangunan Node.js dalam ServBay.

3. Akses Mod Pembangunan

   Pastikan pelayan web ServBay sedang berjalan. Buka pelayar anda dan lawati domain yang baru anda tetapkan: https://servbay-vue-dev.servbay.demo.

   ServBay menyokong penyediaan sijil SSL automatik untuk domain tempatan (melalui ServBay User CA atau ServBay Public CA), jadi anda boleh melayari laman web pembangunan dengan HTTPS, menjadikannya lebih hampir kepada situasi produksi sebenar. Untuk info lanjut tentang SSL, rujuk Cara Konfigurasi SSL untuk Laman Web di ServBay.

   Kini, anda seharusnya melihat aplikasi Vue anda berjalan dalam mod pembangunan di pelayar, serta mendapat manfaat hot reload apabila kod diubah.

Bina Versi Produksi dan Deploy (Menggunakan Perkhidmatan Laman Statik)

Apabila projek Vue.js anda selesai dan bersedia untuk dipublis, anda perlu membina versi yang dioptimumkan untuk produksi. Versi ini biasanya berupa fail statik (HTML, CSS, JavaScript) yang boleh dilayan mudah oleh perkhidmatan laman web statik ServBay.

1. Bina Versi Produksi

   Dari direktori utama projek, jalankan perintah berikut untuk membina produksi:

   npm run build

   Proses bina akan menghasilkan satu set fail statik yang dioptimumkan, biasanya disimpan dalam folder dist di root projek anda.

2. Tetapan Perkhidmatan Fail Statik

   Buka aplikasi ServBay dan pergi ke tetapan Laman Web. Tambah laman baru dan pilih jenis Statik:

   • Nama: My first Vue production site (atau nama lain yang jelas dan mudah dikenal pasti)
   • Domain: servbay-vue-prod.servbay.demo (atau nama domain .servbay.demo pilihan anda)
   • Jenis laman web: Statik
   • Root laman web: Tetapkan kepada path penuh direktori dist selepas bina:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   Selepas konfigurasi disimpan, ServBay akan melayan fail statik dari direktori dist secara terus melalui pelayan webnya.

3. Akses Mod Produksi

   Pastikan pelayan web ServBay sedang berjalan. Buka pelayar dan layari domain yang telah anda tetapkan, contoh: https://servbay-vue-prod.servbay.demo.

   Anda kini melihat versi produksi aplikasi Vue anda, yang telah dioptimumkan untuk prestasi sebaik mungkin. Gabungan domain tersuai dan SSL automatik ServBay membolehkan anda melihat laman produksi secara selamat di persekitaran tempatan.

Perhatian

• Konflik Port: Jika port 8585 (atau port lain yang anda pilih) sudah digunakan oleh aplikasi lain, npm run dev akan gagal. Tukar ke port yang tidak digunakan dan pastikan port sama dikemas kini dalam tetapan proksi balikan ServBay.
• Status Pelayan Web ServBay: Pastikan pelayan web ServBay (Caddy atau Nginx, bergantung tetapan anda) sedang berjalan, jika tidak laman tidak dapat diakses melalui domain.
• Resolusi Nama Domain: ServBay akan mengkonfigurasi nama domain .servbay.demo secara automatik supaya menunjuk ke 127.0.0.1. Jika menggunakan domain lain, anda mungkin perlu mengemas kini fail hosts sistem secara manual atau gunakan fungsi Hosts Manager ServBay untuk memastikan resolusi tempatan berfungsi.

Rumusan

Dengan ServBay, anda boleh memasang persekitaran pembangunan tempatan Node.js yang lengkap di macOS dan Windows, serta mengurus pembangunan dan produksi projek Vue.js dengan mudah. Fungsi Laman Web ServBay memudahkan konfigurasi proksi balikan untuk akses pelayan pembangunan, atau perkhidmatan fail statik untuk produksi, lengkap dengan domain tersuai dan SSL automatik yang efisien dan selamat. Ini menjadikan rutinitas pembangunan projek Vue.js tempatan jauh lebih mudah dan teratur.