Vue CLI: Modern Vue.js Uygulamalarınız için Kapsamlı Bir Başlangıç Rehberi

7 min readAug 8, 2023

Giriş

Vue.js, modern web geliştiriciler arasında giderek popüler hale gelen, kullanıcı dostu ve performanslı bir JavaScript çerçevesidir. Vue’nun bu kadar popüler olmasının sebeplerinden biri de hiç şüphesiz Evan’ın geliştiriciler için işleri kolaylaştırma konusundaki bariz önceliğidir. Vue CLI’da bizim için bu kolaylıklardan biri.

Vue CLI , Vue.js projelerini hızla başlatmanızı ve yönetmenizi sağlayan bir araçtır. Herhangi bir modern JavaScript çerçevesi (framework) kullanırken karşılaşılan genel zorluklardan biri, projenin başlangıç yapısını oluşturmaktır. Vue CLI, bu sorunu çözer ve Vue.js ile çalışmaya başlamayı oldukça kolaylaştırır. Vue CLI , bizim için birçok sıkıcı işi arka planda tamamladığı için biz direkt proje kodlarımıza odaklanabiliriz. Şimdi arkanıza yaslanıp kodlamanın tadını çıkarın.💫

Vue CLI’nin Özellikleri

Vue CLI (Command Line Interface), bize birçok güçlü özellik ve avantaj sunar. Öncelikle, bir Vue.js uygulamasının iskeletini hızla oluşturur. Vue CLI kullanarak bir projeyi başlatmak, birkaç dakika içinde temiz ve düzenli bir proje yapısı elde etmek demektir.

Ayrıca, Vue CLI birçok farklı konfigürasyon seçeneği sunar, böylece projeniz için en uygun yapıyı seçebilirsiniz.

Neden CLI ?

💙 Projemizin hangi kütüphaneleri kullanacağını seçmemizi sağlar.

Ardından bunları otomatik olarak projeye entegre eder.

💚 HTML, CSS ve JavaScript’imizi istediğimiz gibi yazmamıza izin verir.

Tek dosyalı .vue bileşenlerini, TypeScript, SCSS, Pug, ECMAScript’in en son sürümlerini vb. kullanabiliriz.

💙Hot Module Replacement (HMR) modülünü etkinleştirir.

Projenizi kaydettiğinizde, değişiklikler anında tarayıcıda görünür.

Kurulum

Vue CLI’nin kurulumu oldukça basittir ve genellikle birkaç adımdan oluşur.

Öncelikle, Node.js’in ve npm’in sistemde yüklü olduğundan emin olmanız gerekiyor.

Sonrasında, Vue CLI’yi npm paket yöneticisi aracılığıyla aşağıdaki gibi kurabilirsiniz:

Kurulum :

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Proje Oluşturma:

vue create example-vue-project
# OR
vue ui

Bu komut, “example-vue-project” adında bir Vue projesinin oluşturulmasını başlatacaktır.

Daha sonrasında bize projemiz için gerekebilecek özellikler ve eklentiler listesi sunulacaktır.

Typescript: JavaScript’in üst kümesi olan statik tip dilidir. Kodunuzun hatalarını daha erken yakalamanıza ve daha açıklayıcı kod yazmanıza olanak tanır.

JSX Support: JSX, JavaScript içinde XML benzeri sözdizimi kullanmanıza olanak tanır. Vue’de genellikle template kullanılır, ancak bazı durumlarda JSX’in esnekliğini tercih edebilirsiniz.

Vue Router for Single Page Application development: Vue Router, Vue.js ile Tek Sayfalı Uygulamalar (SPA) oluştururken sayfalar arası gezinmeyi yöneten bir kütüphanedir.

Pinia: Vue 3 için durum (state) yönetimi kütüphanesidir. Vuex’un bir alternatifidir ve daha basit ve tür güvenli bir API’ye sahiptir.

Vitest for Unit Testing: Vitest, Vue 3 projeleri için birim testleri yazmanıza yardımcı olan bir test aracıdır.

End-to-End Testing Solution: Uygulamanızın baştan sona nasıl çalıştığını test etmek için kullanılır. Kullanıcı eylemlerini simüle ederek uygulamanın genel davranışını kontrol eder.

ESLint: JavaScript ve TypeScript kodunuzu analiz eden bir araçtır. Potansiyel hataları ve stil sorunlarını belirlemeye yardımcı olur.

Prettier: Otomatik kod biçimlendirici. Kodunuzu belirli bir stile göre otomatik olarak biçimlendirir, böylece kodunuzun tutarlı ve okunabilir olmasını sağlar. Bu araçlar ve kütüphaneler, Vue projelerini geliştirirken üretkenliğinizi artırabilir ve kod kalitenizi yükseltebilir.

Hangi özellikleri veya eklentileri eklemek istediğiniz tamamen projenizin ihtiyaçlarına bağlıdır. Tercihlerimizi yaptıktan sonra projemiz otomatik olarak oluşturulacaktır.

Şimdi cd komutunu kullanarak projemizin içine girelim. Daha sonra npm install komutu ile yeni projemiz için gerekli tüm bağımlılıkları kuralım.

Tarayıcımızda canlı olarak görüntülemek için, uygulamayı derleyen ve yerel bir ana bilgisayarda canlı olarak sunan npm run dev komutunu çalıştıralım:

📌 Vue Router seçeneğine ‘Evet’ dediğim için aralarında gezinebileceğim Ana sayfa ve Hakkında sayfası olmak üzere iki sayfa oluşturuldu.

Vue Projesinin Anatomisi

Vue CLI ile oluşturulan bir proje, belirli bir dosya ve dizin yapısına sahip olacaktır. Her dosya ve dizin, projenin belirli bir kısmını yönetir. Bu yapı, Vue.js kodunuzun organize ve yönetilebilir olmasını sağlar. Gelin bu dosyaların ne işe yaradıklarını tek tek inceleyelim.

1.node_modules: Bu dizin, projenin bağımlı olduğu tüm paketlerin ve kütüphanelerin depolandığı yerdir. ‘npm install’ veya ‘yarn add’ komutlarıyla bir paket eklediğimizde bu dizine eklenir.

2. public: Bu dizin, genellikle statik dosyaları ve projenin giriş noktası olan index.html dosyasını içerir.

-index.html : Uygulamamızın ana HTML dosyasıdır. Uygulamamızın başlangıç noktası olarak hizmet eder. App.vue bileşeninin bağlanacağı yerdir.

3. src: Bu, Vue.js kodunuzun yaşadığı yerdir. Burası projenin çoğunluğunu oluşturur ve çeşitli alt klasörler ve dosyalar içerir. Vue bileşenleri, Javascript dosyaları, stil dosyaları ve diğer varlıklar burada bulunur. Uygulama kodunun tümünü barındırdığı için çoğu vaktinizi burada geçireceksiniz.

assets: Resimler, fontlar, stiller ve diğer statik kaynakları içerir.
components: Tekrar kullanılabilir Vue bileşenlerinin yer aldığı dizindir. Burada Vue uygulamamızın bileşenlerini, yani yapı taşlarını saklarız.
router: Bu klasör, site navigasyonumuzu sağlayan Vue Router kurulumunu ve yönlendirme tablolarını içerir. Vue Router’ı tek sayfalı uygulamamızın farklı “görünümlerini” getirmek için kullanırız.
stores: Eğer Vuex kullanılıyorsa, bu klasör genellikle Vuex state yönetim kodunu içerir. Uygulama boyunca durum(state) yönetimini ele alan Pinia kodunu koyduğumuz yerdir.
views: Uygulamanın ‘sayfalarını’ veya ‘görünümlerini’ içerir. Bu bileşenler genellikle router tarafından kullanılır.
App.vue: Uygulamanın ana bileşeni ve diğer tüm bileşenlerin olduğu kök bileşendir.
main.js (veya main.ts): Uygulamanın giriş noktasıdır. Vue örneğini oluşturur, router’ı ve Vuex store’u bağlar ve App.vue bileşenimizi (ve içerisinde iç içe olan her şeyi) render eder ve DOM’a monte eder.

4.eslintrc.js: ESLint yapılandırma dosyası. Kod stilinizi ve kurallarınızı belirtir.

5.gitignore: Git tarafından izlenmemesi gereken dosyaların listesini içerir.

6.package-lock.json (veya yarn.lock): Projenin bağımlılıklarının tam versiyonlarını kilitlemek için kullanılır.

7.package.json: Projenin bağımlılıklarını, scriptlerini ve konfigürasyonlarını listeler.

8.README.md: Projenin bir açıklamasını, kurulum talimatlarını ve diğer önemli bilgileri içerir.

9.babel.config.js: Babel yapılandırması için kullanılır.Javascript kodunuzun nasıl dönüştürüleceğini belirtir.

10.vue.config.js: Vue CLI yapılandırma dosyasıdır. Bu dosya genellikle oluşturulmaz, ancak özel CLI yapılandırmaları gerektiğinde elle oluşturulabilir.

Uygulama Nasıl Yüklenir ?

📁 src/main.js

Main.js dosyamızda, Vue’den ‘createApp’ metodu ile birlikte App.js bileşenimizi içe aktarıyoruz. Bu metodu çalıştırarak, tüm uygulama kodumuzu içeren App bileşenini bu metoda veriyoruz. Çünkü diğer tüm bileşenler bu ana bileşenin içinde yer alıyor.

Metodun adının açıkça belirttiği gibi, bu, uygulamamızı oluşturuyor. Oluşturulan bu uygulamaya, yönlendirici (router) ve yeni oluşturulmuş bir Pinia örneğini kullanması gerektiğini söylüyoruz. Son olarak, uygulama, ‘mount’ metodu aracılığıyla DOM’a monte ediliyor. Bu metod, uygulamanın DOM’da nereye monte edileceğini belirtmek için bir argüman alır. Peki, bu “#app” kimliği tam olarak nerede?

📁 index.html

index.html dosyamıza göz attığımızda, “app” kimliğine sahip bir ‘div’ elementi görebiliriz.

Hadi bu süreci görselleştirelim :

Eklentiler ve Yapılandırma

Vue CLI, özelleştirilebilir bir yapılandırma sistemine sahiptir. Bunun anlamı, başlangıçtaki seçeneklerle sınırlı olmayıp,ileri zamanlarda projenizi özelleştirebilir ve genişletebilirsiniz. Vue CLI, çeşitli Vue.js eklentilerini ve paketlerini destekler, böylece ihtiyaç duyduğunuz her özelliği istediğiniz zaman ekleyebilirsiniz.

Bir örnek olması açısından birlikte projemize storybook ekleyelim :

vue add storybook

Evet, Vue CLI ile eklenti eklemek bu kadar basit!

🎉 Eklentiler hakkında daha detaylı bilgi edinmek istiyorsan , Derick Sozo Ruiz’in 5 Vue CLI 3 plugins for your Vue project adlı makalesine göz atabilirsin.

Vue CLI UI

Vue CLI’nin belki de en dikkat çekici özelliklerinden biri, kendi grafiksel kullanıcı arayüzüdür. Vue CLI UI, bir Vue.js projesini görsel olarak yönetmenizi sağlar. Bu, projenizin bağımlılıklarını, yapılandırmasını ve daha fazlasını görsel bir şekilde yönetmenize olanak sağlar.

🎉 Vue UI hakkında daha detaylı bilgi edinmek istiyorsan ,Peter Mbanugo’nun Creating and Managing Vue Projects with Vue UI adlı makalesine göz atabilirsin.

Sonuç

Vue CLI, modern Vue.js uygulamalarının oluşturulması ve yönetilmesi için güçlü ve esnek bir araçtır. Yeni başlayanlardan , deneyimli geliştiricilere kadar, herkesin Vue.js’i daha etkili bir şekilde kullanmasına yardımcı olmaktadır.

Dolayısıyla, Vue CLI, her Vue.js geliştiricisinin alet çantasında bulunması gereken bir araçtır.

Geliştirme sürecinizde hepinize başarılar dilerim! 🚀

Güncelleme :

Vue CLI artık bakım modunda. Yeni projeler için, Vite tabanlı projeleri oluşturmak için lütfen create-vue kullanın. create-vue hem Vue 2 hem de Vue 3'ü destekler.