Membina & Menjalankan Projek Nuxt.js dengan ServBay

Apa itu Nuxt.js?

Nuxt.js ialah rangka kerja sumber terbuka berasaskan Vue.js yang popular, direka khusus untuk membina aplikasi web moden dan berprestasi tinggi. Ia menyingkat banyak konfigurasi teknikal, membolehkan pembangun menumpukan perhatian pada logik perniagaan. Nuxt.js sangat cemerlang dalam pembangunan aplikasi dengan rendering sisi pelayan (SSR), dan juga menawarkan keupayaan penjanaan laman statik (SSG) yang mantap — menjadikannya pilihan hebat untuk laman web serta aplikasi yang kaya kandungan dan mesra SEO.

Ciri Utama & Kelebihan Nuxt.js

• Rendering Sisi Pelayan (SSR): Pre-render halaman Vue di pelayan untuk masa pemuatan yang lebih pantas, pengalaman pengguna yang lebih baik, dan peningkatan keupayaan pengindeksan carian – sangat baik untuk SEO.
• Penjanaan Laman Statik (SSG): Janakan fail HTML statik sepenuhnya semasa proses build. Kaedah ini sangat pantas, mudah untuk digunakan, dan tidak memerlukan runtime pelayan — sesuai untuk blog atau laman dokumentasi yang kandungannya jarang berubah.
• Pembahagian Kod Automatik (Automatic Code Splitting): Nuxt.js membahagikan kod JavaScript berdasarkan laluan secara automatik, memuat hanya kod perlu untuk setiap halaman, seterusnya mengoptimumkan prestasi aplikasi.
• Routing Berdasarkan Struktur Fail (File-system Routing): Laluan dihasilkan secara automatik berdasarkan fail .vue dalam direktori pages, menyederhanakan proses pengurusan routing.
• Modular: Ekosistem modul yang kukuh menyokong integrasi pelbagai fungsi dan perkhidmatan pihak ketiga (seperti Axios, sokongan PWA, CMS, dan banyak lagi).
• Keutamaan Pada Konvensyen berbanding Konfigurasi: Menggunakan struktur folder dan nama yang standard, mengurangkan kerumitan konfigurasi awal.
• Pengalaman Pembangun yang Cemerlang: Sokongan untuk Hot Module Replacement (HMR), laporan ralat interaktif, serta banyak peralatan mesra pembangun.

Berkat segala kelebihan ini, Nuxt.js menjadikan penciptaan aplikasi web berprestasi tinggi, kompleks, serta SEO-optimized jauh lebih mudah dan efisien.

Menyediakan & Menjalankan Projek Nuxt.js dalam ServBay

Panduan ini akan menerangkan cara menggunakan ServBay sebagai persekitaran pembangunan setempat yang mantap — menyasarkan Node.js serta ciri pengurusan laman web untuk penciptaan, konfigurasi, dan pelancaran projek Nuxt.js. Kita akan telusuri cara menjalankan mod pembangunan (dengan proksi terbalik) serta mod produksi (servis fail statik) di dalam ServBay.

Prasyarat

Sebelum bermula, pastikan anda:

1. Telah memasang aplikasi ServBay dengan jayanya.
2. Sudah memasang dan mengaktifkan pakej Node.js dalam ServBay (semak/urus di tab "Pakej" pada panel kawalan ServBay).
3. Faham asas Node.js, npm (atau Yarn/pnpm), serta perintah terminal.
4. (Disarankan) Sudah memasang editor kod seperti VS Code.

Mencipta Projek Nuxt.js

Kita akan gunakan create-nuxt-app untuk memulakan projek Nuxt.js dengan cepat.

1. Buka Terminal & Navigasi ke Direktori Akar Laman ServBay

   Direktori akar laman ServBay ialah /Applications/ServBay/www — lokasi digalakkan untuk kod projek pembangunan setempat. Buka aplikasi Terminal anda dan jalankan:

   cd /Applications/ServBay/www

2. Mulakan Projek Nuxt.js Baru

   Gunakan perintah berikut untuk memulakan projek bernama servbay-nuxt-app. npx membolehkan anda jalankan package NPM tanpa pemasangan global:

   npx create-nuxt-app servbay-nuxt-app

   Ikuti arahan yang dipaparkan dalam terminal. Pilih pilihan mengikut keperluan anda. Contoh:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Pilih pengurus pakej (disarankan: Npm atau Yarn)
   ? UI framework: None          # Pilih mengikut keperluan
   ? Nuxt.js modules: Axios      # Pilih modul Nuxt.js pilihan anda
   ? Linting tools: ESLint       # Pilih alat linting jika mahu
   ? Testing framework: None     # Pilih kerangka ujian jika perlu
   ? Rendering mode: Universal (SSR / SSG) # Pilih mod rendering (Universal = SSR + SSG)
   ? Deployment target: Server (Node.js hosting) # Pilih sasaran (Server = sesuai untuk pembangunan setempat)
   ? Development tools: jsconfig.json (Recommended for VS Code) # Pilih alat pembangunan jika perlu

3. Pasang Kebergantungan Projek

   Masuk ke folder projek yang baru dibuat, dan pasang kebergantungan dengan pengurus pakej pilihan anda:

   cd servbay-nuxt-app
   npm install
   # Atau gunakan Yarn: yarn install
   # Atau pnpm: pnpm install

   Tunggu sehingga proses pemasangan selesai.

Ubah Kandungan Output Projek

Untuk pengesahan, mari ubah fail halaman utama agar memaparkan mesej mudah.

1. Buka Fail pages/index.vue

   Gunakan editor kod untuk buka pages/index.vue dalam projek anda.

2. Kemas Kini Kandungan Fail

   Gantikan kandungan tersebut dengan kod di bawah untuk memaparkan "Hello ServBay!":

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   Ciri scoped pada tag style memastikan stail hanya terpakai pada komponen ini, dan sedikit penambahbaikan visual telah dibuat.

Menjalankan Mod Pembangunan Nuxt.js dalam ServBay

Biasanya, pelayan pembangunan Nuxt.js berfungsi di port khas setempat. Untuk membolehkan akses melalui domain khusus, sijil SSL, serta port 80/443 standard yang diurus oleh ServBay, kita akan gunakan ciri proksi terbalik ServBay.

1. Mulakan Pelayan Pembangunan Nuxt.js

   Dari akar projek, jalankan perintah berikut — kami gunakan port 8585 (anda boleh pilih port lain yang tidak digunakan):

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Atau dengan Yarn: yarn dev --port 8585
   # Atau pnpm: pnpm run dev --port 8585

   Selepas pelayan berjalan, biasanya ia akan berada di http://localhost:8585. Pastikan tingkap terminal ini dibuka sepanjang ujian berjalan.

2. Konfigurasikan Laman Web ServBay (Proksi Terbalik)

   Buka panel kawalan ServBay, pergi ke tab "Laman Web" dan klik butang + di penjuru bawah kiri untuk tambah konfigurasi laman baru:

   • Nama (Name): Isikan nama mudah diingati, contoh Nuxt.js Dev Site (Proxy).
   • Domain: Masukkan domain khusus pilihan, contoh nuxt-dev.servbay.demo. Menggunakan akhiran .servbay.demo digalakkan untuk konsistensi.
   • Jenis Laman Web (Website Type): Pilih Reverse Proxy.
   • Alamat IP (IP Address): Isikan 127.0.0.1 (alamat loopback setempat).
   • Port: Isikan port yang digunakan Nuxt.js dev server, iaitu 8585.

   Selepas lengkap, klik "Tambah" atau "Simpan". ServBay akan mengemaskini dan mengaktifkan konfigurasi automatik.

   Rujuk juga panduan terperinci di Menambah laman Node.js untuk pembangunan.

3. Akses Laman dalam Mod Pembangunan

   Di pelayar web, lawati domain yang baru dikonfigurasi, contoh https://nuxt-dev.servbay.demo.

   Melalui proksi terbalik ServBay, anda dapat mengakses pelayan Nuxt.js menggunakan domain serta port HTTPS yang diurus oleh ServBay. Sijil SSL akan dijana dan dikonfigurasi automatik (ditandatangani oleh ServBay User CA — pastikan komputer anda mempercayai CA ini). Ini sangat berguna untuk simulasi persekitaran produksi, menguji Service Workers, atau sebarang fungsi yang memerlukan konteks selamat.

Membina & Menyediakan Mod Produksi

Selepas siap membangunkan projek Nuxt.js dan mahu lakukan pratinjau pengeluaran secara setempat, anda boleh membina versi produksi. Untuk projek dengan mod Universal dan berhasrat menghasilkan laman statik, gunakan nuxt generate (atau npm run export).

1. Bina Versi Produksi & Fail Statik

   Dari akar projek, jalankan:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # Atau Yarn: yarn build && yarn export
   # Atau pnpm: pnpm build && pnpm run export

   Selepas tamat, folder dist akan mengandungi semua fail statik yang dijana.

2. Konfigurasikan Laman Web ServBay (Servis Fail Statik)

   Dalam panel kawalan ServBay, pergi ke tab "Laman Web", klik + untuk tambah laman baru:

   • Nama (Name): Contoh Nuxt.js Prod Site (Static).
   • Domain: Masukkan domain untuk pratinjau produksi, contoh nuxt-prod.servbay.demo.
   • Jenis Laman Web (Website Type): Pilih Static.
   • Akar Laman Web (Website Root): Masukkan laluan ke folder fail statik Nuxt.js, iaitu /Applications/ServBay/www/servbay-nuxt-app/dist.

   Selesai tetapan, klik "Tambah" atau "Simpan" untuk mengaktifkan.

3. Akses Laman Produksi

   Buka pelayar web dan lawati domain yang telah ditetapkan, contoh https://nuxt-prod.servbay.demo.

   Pelayan web berprestasi tinggi ServBay (Caddy atau Nginx, bergantung pada konfigurasi) akan menyediakan fail statik terus dari direktori dist. Ia adalah cara penyampaian statik yang paling efisien dan pantas. Anda juga akan menerima sokongan SSL percuma dan domain khusus yang diurus oleh ServBay.

Kesimpulan

Menggunakan ServBay, anda boleh mengurus sepenuhnya pembangunan dan pratinjau setempat projek Nuxt.js anda secara mudah. Jalankan pelayan pembangunan melalui pakej Node.js ServBay, konfigurasikan proksi terbalik untuk pembangunan selamat di bawah domain & HTTPS khusus, dan akhirnya, setelah pembangunan siap, hasilkan fail statik dan gunakan jenis laman web statik ServBay untuk pratinjau berprestasi tinggi. Proses kerja ini memanfaatkan sepenuhnya semua kemudahan serta kuasa ServBay, memudahkan pembangunan dan ujian projek frontend anda. Semoga panduan ini membantu anda bekerja lebih produktif dengan Nuxt.js dan ServBay!