Vue.js CLI'yi Anlamak ve Nasıl Kullanılacağını Öğrenmek

Vue.js CLI (Komut Satırı Arayüzü), Vue.js projelerini kurma, geliştirme ve yönetme sürecini basitleştiren güçlü bir araçtır. Yeni projeler oluşturmak, bağımlılıkları yönetmek ve yapı ayarlarını yapılandırmak için standartlaştırılmış ve etkili bir yol sağlar. Bu makale, Vue CLI'nin özelliklerini inceleyecek ve onu etkili bir şekilde nasıl kullanacağınızı gösterecektir.

Vue CLI'yi yükleme

Vue CLI'yi kullanmaya başlamak için, onu sisteminize global olarak yüklemeniz gerekir. Node.js ve npm'in (Node Paket Yöneticisi) yüklü olduğundan emin olun, ardından terminalinizde veya komut isteminizde aşağıdaki komutu çalıştırın:

npm install -g @vue/cli

Bu komut Vue CLI'yi global olarak kurar ve vue komutunu Vue.js projeleri oluşturmak ve yönetmek için kullanılabilir hale getirir.

Yeni Bir Vue.js Projesi Oluşturma

Vue CLI yüklendikten sonra, aşağıdaki komutu çalıştırarak kolayca yeni bir Vue.js projesi oluşturabilirsiniz:

vue create my-vue-project

Projeniz için bir ön ayar seçmeniz istenecektir. Babel ve ESLint'i içeren varsayılan ön ayardan seçim yapabilir veya Vue Router, Vuex ve TypeScript gibi özellikleri manuel olarak seçebilirsiniz. Yeni başlayanlar için, Enter tuşlarına basarak varsayılan ön ayarı seçmeniz önerilir.

Vue CLI Ön Ayarlarını Anlama

Vue CLI, projenizi ön ayarlar aracılığıyla yapılandırmak için çeşitli seçenekler sunar:

• Varsayılan Ön Ayar: Babel ve ESLint gibi temel araçları içerir. Çoğu proje için uygundur ve yeni başlayanlar için iyi bir başlangıç ​​noktasıdır.
• Özellikleri Manuel Olarak Seçin: Yönlendirme için Vue Router, durum yönetimi için Vuex, tür denetimi için TypeScript gibi belirli özellikleri seçmenize olanak tanır.

Proje Yapısı

Projeniz oluşturulduktan sonra standart bir Vue.js proje yapısı göreceksiniz. İşte bazı önemli klasörler ve dosyalar:

• src: Bileşenler, görünümler ve stiller dahil olmak üzere uygulamanızın kaynak kodunu içerir.
• public: Statik varlıkları ve uygulamanız için giriş noktası görevi gören index.html dosyasını içerir.
• src/main.js: Vue uygulamanız için giriş dosyası. Vue örneğini başlatır ve DOM'a bağlar.
• src/App.vue: Uygulamanızın kök bileşeni. Uygulamanızın ana düzenini tanımlamak için bu dosyayı özelleştirebilirsiniz.
• src/components: Vue bileşenlerini içerir. Buraya yeni bileşenler ekleyebilir ve bunları uygulamanıza aktarabilirsiniz.

Geliştirme Sunucusunu Çalıştırma

Vue.js uygulamanızı çalışırken görmek için aşağıdaki komutu çalıştırarak geliştirme sunucusunu başlatın:

npm run serve

Bu, http://localhost:8080 (veya başka bir kullanılabilir port) adresinde yerel bir sunucu başlatacaktır. Uygulamanızı görüntülemek için bu URL'yi tarayıcınızda açın.

Üretim İçin Bina

Uygulamanızı dağıtmaya hazır olduğunuzda, onu üretim için derlemeniz gerekir. Üretime hazır bir derleme oluşturmak için aşağıdaki komutu çalıştırın:

npm run build

Bu komut, web sunucunuza dağıtabileceğiniz dist klasöründe optimize edilmiş ve küçültülmüş dosyalar oluşturur.

Vue CLI Eklentilerini Kullanma

Vue CLI, projenize özellikler ve yetenekler ekleyen eklentileri destekler. Bir eklentiyi yüklemek için aşağıdaki komutu çalıştırın:

vue add 

Örneğin, Vue Router'ı projenize eklemek için şunu çalıştırmalısınız:

vue add router

Bir eklentiyi kaldırmak için vue remove komutunu kullanın:

vue remove router

Eklentiler ayrıca vue.config.js dosyası aracılığıyla veya projenin yapılandırmasını değiştirerek kurulabilir ve yönetilebilir.

Vue CLI Yapılandırmasını Özelleştirme

Projenizin kökünde vue.config.js dosyasını oluşturarak veya değiştirerek Vue CLI yapılandırmasını özelleştirebilirsiniz. Bu dosya, proxy yapılandırmaları, genel yollar ve daha fazlası gibi çeşitli ayarları ayarlamanıza olanak tanır.

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  },
  publicPath: '/my-app/'
};

Çözüm

Vue.js CLI, Vue.js projelerini oluşturma, yönetme ve yapılandırma sürecini basitleştiren güçlü bir araçtır. Vue CLI'yi kullanarak, yeni bir projeyi hızla kurabilir, bir geliştirme sunucusu çalıştırabilir, üretim için oluşturabilir ve projenizi eklentiler ve yapılandırma seçenekleriyle özelleştirebilirsiniz. Bu yeteneklerle, Vue.js ile modern, dinamik web uygulamaları geliştirmeye başlamak için iyi bir donanıma sahip olursunuz.