Vue.js Projesi Oluşturma ve Çalıştırma

Vue.js Nedir?

Vue.js, kullanıcı arayüzleri oluşturmak için kullanılan artan bir JavaScript çatısıdır. Diğer büyük çatılardan farklı olarak, Vue, aşağıdan yukarıya doğru aşamalı geliştirme tasarımı benimser. Vue'nun çekirdek kütüphanesi yalnızca görünüm katmanına odaklanır, bu da hem öğrenmeyi kolaylaştırır hem de üçüncü parti kütüphaneler veya mevcut projelerle entegrasyonu mümkün kılar. Vue 3, Vue.js'nin en yeni sürümüdür ve daha hızlı performans, daha küçük paket boyutu ve daha iyi TypeScript desteği gibi birçok yeni özellik ve yenilik sunar.

Vue 3'ün Başlıca Özellikleri ve Avantajları

• Bileşen Tabanlı API: Fonksiyonları birleştirerek mantık kodunu düzenler, böylece kodun bakımı ve yeniden kullanımı daha kolay hale gelir.
• Daha Hızlı Performans: Vue 3, Proxy nesnelerini kullanarak tepki verme sistemini gerçekleştirdi, bu da performansı önemli ölçüde artırdı.
• Daha Küçük Paket Boyutu: Tree-shaking teknolojisi sayesinde, Vue 3'ün paket boyutu Vue 2'den daha küçüktür.
• Daha İyi TypeScript Desteği: Vue 3, daha iyi TypeScript tip tanımları sunarak geliştirme deneyimini iyileştirir.
• Geliştirilmiş Bileşen Yaşam Döngüsü: Yeni yaşam döngüsü kancaları, bileşen mantığını daha açık ve yönetilebilir hale getirir.

Vue 3'ü kullanarak, geliştiriciler modern ve hızlı yanıt veren web uygulamalarını daha verimli bir şekilde oluşturabilirler.

ServBay Kullanarak Vue 3 Projesi Oluşturma ve Çalıştırma

Bu makalede, ServBay'in sunduğu Node.js ortamını kullanarak bir Vue 3 projesi oluşturup çalıştıracağız. Web sunucusunu ayarlamak için ServBay'in "host" özelliğini, ters proxy ve statik dosya hizmeti aracılığıyla projeye erişim sağlamak için kullanacağız.

Vue 3 Projesi Oluşturma

1. Projeyi Başlatma

   İlk olarak, ServBay'in sağladığı Node.js ortamını yüklediğinizden emin olun. Ardından, aşağıdaki komutu kullanarak yeni bir Vue 3 projesi başlatın:

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

   Proje adını (örneğin servbay-vue-app) girin ve diğer seçenekleri ihtiyaçlarınıza göre seçin:

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

2. Bağımlılıkları Yükleme

   Proje dizinine girin ve bağımlılıkları yükleyin:

   cd servbay-vue-app
   npm install

Vue Proje Çıkış İçeriğini Değiştirme

1. src/App.vue Dosyasını Düzenleyin

   src/App.vue dosyasını açın ve içeriği "Hello ServBay!" olacak şekilde değiştirin:

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </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>

Geliştirme Moduna Geçiş

1. Geliştirme Sunucusunu Çalıştırma

   Geliştirme sunucusunu başlatın ve portu belirleyin (örneğin: 8585):

   npm run dev -- --port 8585

   Bu, yerel bir geliştirme sunucusu başlatacak ve port 8585'i arayüze açacaktır.

2. ServBay Host Ters Proxy'yi Yapılandırma

   ServBay'in "host" özelliğini kullanarak geliştirme sunucusuna erişmek için ters proxy yapılandırın. ServBay'in "host" ayarlarında yeni bir ters proxy ekleyin:

   • İsim: My first Vue dev site
   • Alan Adı: servbay-vue-test.dev
   • Host Türü: Ters Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Daha detaylı ayarlar için Nodejs geliştirme web sitesi ekleme konusuna bakın.

3. Geliştirme Moduna Erişim

   Tarayıcınızı açın ve https://servbay-vue-test.dev adresini ziyaret edin, projeyi canlı olarak görün. ServBay'in özelleştirilmiş alan adı ve ücretsiz SSL sertifikası desteği sayesinde daha yüksek güvenlik sağlar.

Üretim Versiyonu İnşa Etme

1. Üretim Versiyonunu İnşa Etme

   Geliştirme tamamlandığında, aşağıdaki komutla üretim versiyonunu inşa edin:

   npm run build

   İnşa tamamlandığında, üretilen statik dosyalar dist dizininde yer alacaktır.

2. Statik Dosya Hizmetini Ayarlama

   ServBay'in "host" özelliğini kullanarak üretim versiyonuna erişmek için statik dosya hizmetini ayarlayın. ServBay'in "host" ayarlarında yeni bir statik web sitesi ekleyin:

   • İsim: My first Vue production site
   • Alan Adı: servbay-vue-test.prod
   • Host Türü: Statik
   • Web Sitesi Kök Dizini: /Applications/ServBay/www/servbay-vue-app/dist

3. Üretim Moduna Erişim

   Tarayıcınızı açın ve https://servbay-vue-test.prod adresini ziyaret edin, inşa edilmiş üretim versiyonunu görün. ServBay’in özelleştirilmiş alan adı ve ücretsiz SSL sertifikaları ile web siteniz daha yüksek güvenlik ve güvenilirlik sağlar.

Bu adımlar sayesinde, bir Vue 3 projesi oluşturup çalıştırdınız ve ServBay'in sunduğu özellikleri kullanarak projenizi yönetip erişimi sağladınız.