Mencipta dan Menjalankan Projek Vue.js pada macOS menggunakan ServBay

Vue.js ialah rangka kerja JavaScript progresif yang popular untuk membina antara muka pengguna. Ia sangat mudah dipelajari, fleksibel serta berprestasi tinggi, dan sangat sesuai untuk membina aplikasi satu halaman (SPA). ServBay, sebagai persekitaran pembangunan web tempatan yang berkuasa, menyediakan sokongan Node.js yang mudah untuk pembangun, menjadikannya platform ideal untuk pembangunan Vue.js pada macOS.

Panduan ini akan menerangkan secara terperinci langkah-langkah menggunakan persekitaran bersepadu ServBay untuk mencipta sebuah projek Vue.js dari awal, dan mengaksesnya melalui mod pembangunan serta pengeluaran menggunakan ServBay.

Apakah itu Vue.js?

Vue.js adalah rangka kerja JavaScript progresif untuk membina antara muka pengguna. Tidak seperti rangka kerja berskala besar yang lain, Vue direka bentuk menggunakan pendekatan secara modular, membolehkan pengembangan secara bertingkat dari bawah ke atas. Teras perpustakaan Vue hanya memfokuskan pada lapisan pandangan (view layer), menjadikannya mudah untuk mula digunakan dan juga mudah untuk diintegrasikan bersama perpustakaan pihak ketiga atau projek sedia ada. Vue 3 merupakan versi terbaru dengan pelbagai ciri dan penambahbaikan baharu, termasuk prestasi lebih pantas, saiz fail yang lebih kecil, dan sokongan TypeScript yang dipertingkatkan.

Ciri Utama dan Kelebihan Vue 3

• API Komposisi (Composition API): Penyusunan logik kod melalui fungsi, menjadikan pengurusan kod untuk komponen besar lebih mudah dan boleh diguna semula.
• Peningkatan Prestasi: Vue 3 menggunakan objek Proxy untuk sistem reaktif, serta mengoptimumkan algoritma virtual DOM, meningkatkan prestasi dengan ketara.
• Saiz Fail Lebih Kecil: Melalui teknik tree-shaking, teras Vue 3 sangat ringan dan pantas dimuatkan.
• Sokongan TypeScript Lebih Baik: Vue 3 menyediakan definisi jenis TypeScript yang lengkap, menjadikan pembangunan aplikasi Vue dengan TypeScript lebih lancar.
• Lifecycle Komponen Dipertingkatkan: Terdapat hook lifecycle dan fungsi Setup baharu untuk pengurusan logik komponen yang lebih jelas dan teratur.

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

Cipta dan Jalankan Projek Vue.js dengan Persekitaran Bersepadu ServBay

Dalam artikel ini, kita akan gunakan persekitaran Node.js yang disediakan oleh ServBay untuk mencipta dan menjalankan projek Vue.js. Kita juga akan menggunakan fungsi Website dalam ServBay untuk mengkonfigurasi pelayan web, membolehkan akses tempatan melalui proksi songsang dan servis fail statik.

Keperluan Asas

Sebelum memulakan, pastikan anda telah melengkapkan perkara berikut:

1. Pasang ServBay: Anda telah berjaya memasang persekitaran pembangunan tempatan ServBay pada macOS anda.
2. Pasang Pakej Node.js: Gunakan fungsi pengurusan pakej ServBay untuk memasang Node.js. Rujuk Cara Memasang dan Menggunakan Node.js dalam ServBay untuk langkah terperinci.

Mencipta Projek Vue.js

1. Inisialisasi Projek

   Buka aplikasi Terminal anda. ServBay mengesyorkan anda menyimpan projek laman web di direktori /Applications/ServBay/www. Pergi ke direktori tersebut dan gunakan arahan npm create vue@latest untuk memulakan projek Vue.js baharu. @latest memastikan anda menggunakan CLI Vue atau create-vue terkini (kebiasaannya untuk Vue 3).

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

   Ikuti arahan pada terminal untuk menetapkan nama projek (disyorkan servbay-vue-app), serta pilih fungsi tambahan seperti TypeScript, Vue Router, Pinia dan sebagainya mengikut keperluan. Contoh konfigurasi:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Pilih Yes/No mengikut keperluan anda
   ✔ Add JSX Support? … No # Pilih Yes/No mengikut keperluan
   ✔ Add Vue Router for Single Page Application development? … Yes # Disyorkan pilih Yes
   ✔ Add Pinia for state management? … No # Pilih Yes/No mengikut keperluan
   ✔ Add Vitest for Unit testing? … No # Pilih Yes/No mengikut keperluan
   ✔ Add an End-to-End Testing Solution? … No # Pilih Yes/No mengikut keperluan
   ✔ Add ESLint for code quality? … Yes # Disyorkan pilih Yes
   ✔ Add Prettier for code formatting? … Yes # Disyorkan pilih Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Pilih Yes/No mengikut keperluan

2. Pasang Pergantungan Projek

   Selepas inisialisasi projek, masuk ke folder projek baharu servbay-vue-app dan jalankan npm install untuk memasang semua pergantungan diperlukan.

   cd servbay-vue-app
   npm install

Ubah Kandungan Projek Contoh (Pilihan)

Untuk mengesahkan projek anda berfungsi, anda boleh sunting fail src/App.vue dan tukar kandungannya kepada output "Hello ServBay!" secara ringkas.

Buka fail src/App.vue dalam folder projek dan tukar kandungan kepada:

<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>

Sediakan Persekitaran Pembangunan (Guna Proksi Songsang)

Dalam mod pembangunan, projek Vue biasanya menjalankan pelayan pembangunan tempatan (berasaskan Vite atau Webpack) yang menyokong hot module reload (HMR) untuk kemudahan pembangunan. ServBay boleh menggunakan proksi songsang untuk memetakan satu domain tempatan ke alamat dan port pelayan ini.

1. Jalankan Pelayan Pembangunan

   Dalam direktori projek, jalankan perintah berikut untuk memulakan pelayan pembangunan. Gunakan parameter --port untuk menetapkan port (cth: 8585), dan pastikan port ini tidak digunakan program lain.

   npm run dev -- --port 8585

   Terminal akan memaparkan bahawa pelayan pembangunan telah bermula, contohnya di http://localhost:8585.

2. Konfigurasi Proksi Songsang Laman Web dalam ServBay

   Buka antaramuka aplikasi ServBay dan navigasi ke tetapan Website. Tambah laman web baru dengan jenis Reverse Proxy:

   • Nama: My first Vue dev site (atau nama lain yang mudah diingati)
   • Domain: servbay-vue-dev.servbay.demo (atau domain .servbay.demo lain pilihan anda)
   • Jenis Website: Reverse Proxy
   • IP Target Proksi Songsang: 127.0.0.1
   • Port Target Proksi Songsang: 8585 (sama seperti port pelayan pembangunan anda)

   Selepas simpan konfigurasi, ServBay akan kemas kini konfigurasi pelayan webnya (Caddy atau Nginx), memproksi trafik untuk servbay-vue-dev.servbay.demo ke http://127.0.0.1:8585.

   Untuk langkah lebih terperinci, rujuk Menambah Laman Web Node.js untuk Pembangunan dalam ServBay.

3. Akses dalam Mod Pembangunan

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

   Dengan sokongan SSL automatik oleh ServBay (melalui ServBay User CA atau ServBay Public CA), anda boleh mengakses laman pembangunan anda melalui HTTPS dengan selamat—lebih hampir dengan persekitaran pengeluaran sebenar. Untuk maklumat SSL, rujuk Mengkonfigurasi Sijil SSL untuk Laman Web dalam ServBay.

   Kini, anda sepatutnya dapat melihat aplikasi Vue anda berjalan dalam mod pembangunan dengan sokongan hot reload untuk kemudahan suntingan kod masa nyata.

Bina Versi Pengeluaran & Deploy (Guna Servis Tapak Statik)

Apabila pembangunan projek Vue.js anda selesai dan bersedia untuk deploy, anda perlu membina versi optimum untuk pengeluaran. Versi ini biasanya terdiri daripada fail statik (HTML, CSS, JavaScript) yang boleh dilayan terus oleh fungsi tapak statik ServBay.

1. Bina Versi Pengeluaran

   Dalam root projek, jalankan perintah berikut untuk membina output pengeluaran:

   npm run build

   Fail statik yang dioptimumkan akan dijana dalam folder dist di root projek anda.

2. Sediakan Servis Fail Statik

   Gunakan antaramuka ServBay, pergi ke tetapan Website dan tambah satu lagi konfigurasi —kali ini jenis Static:

   • Nama: My first Vue production site (atau nama lain pilihan anda)
   • Domain: servbay-vue-prod.servbay.demo (atau nama domain .servbay.demo lain)
   • Jenis Website: Static
   • Root Directory Website: /Applications/ServBay/www/servbay-vue-app/dist (laluan penuh ke direktori dist projek anda)

   Selepas menyimpan, ServBay akan mengkonfigurasi pelayan web untuk melayan fail statik dalam direktori dist ini.

3. Akses dalam Mod Pengeluaran

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

   Kini, anda sedang melihat versi Vue aplikasi dalam mod pengeluaran yang telah dioptimumkan untuk prestasi terbaik. Fungsi domain tersuai dan SSL automatik ServBay juga membolehkan anda menguji tapak pengeluaran secara selamat di mesin tempatan anda.

Perkara Penting

• Pertindihan Port: Jika port 8585 (atau sebarang port lain yang anda pilih) sudah digunakan, npm run dev akan mengalami ralat. Gunakan port lain yang kosong dan pastikan konfigurasi ServBay untuk proksi songsang dikemaskini juga.
• Status Pelayan Web ServBay: Pastikan pelayan web ServBay (Caddy atau Nginx, bergantung pada konfigurasi anda) dalam keadaan berjalan, jika tidak anda tidak dapat mengakses laman web melalui domain yang telah ditetapkan.
• Resolusi Domain: ServBay akan automatik mengenalpasti domain .servbay.demo yang anda tambah di Website kepada 127.0.0.1. Jika anda guna domain lain, anda mungkin perlu ubah fail hosts sistem atau gunakan fungsi Hosts Manager ServBay untuk memastikan rujukan domain ke mesin tempatan adalah tepat.

Ringkasan

Dengan ServBay, anda boleh dengan mudah membina persekitaran pembangunan tempatan Node.js yang bersepadu pada macOS, serta mengurus pembangunan dan deploy projek Vue.js anda dengan lancar. Melalui fungsi Website ServBay, anda boleh dengan pantas mengkonfigurasi proksi songsang untuk pelayan pembangunan atau terus melayan fail statik hasil pengeluaran, disamping manfaat domain tersuai dan SSL automatik untuk keselamatan serta pengalaman yang profesional. Ini sangat memudahkan proses penetapan dan workflow projek Vue.js anda di persekitaran tempatan.