Vue.js Vue-CLI Kullanımı

Vue CLI (Vue Command Line Interface) esasında Single-File JavaScript Components için de bir gereksinim. Vue projeleri oluşturmak için ihtiyaç duyduğumuz tüm yapılandırmaları sunan CLI ile kurulum işlemleri ve pluginlerin projelere dahil edilmesi de (hazır şablonlar da dahil) oldukça pratik hale gelmiş durumda. Bu yazıda CLI’in kurulum ve kullanımına değinecek ve nasıl örnek projeler oluşturabileceğimize bakacağız.

Vue-CLI

Vue CLI (@vue/cli), Vue projeleri için standart bir uygulama geliştirme zemini sunar. Elbette bunda Vue Cli’in eklenti tabanlı (plugin-based architecture) mimariye sahip olmasının oldukça büyük etkisi var. Bu eklentiler uyum içerisinde çalıştırılır ve böylelikle yapılandırmalarla uğraşmak, kendi kendini tekrar eden işlemlerle vakit kaybetmek yerine uygulamaya geliştirmeye odaklanabiliriz. Aynı kolaylık ve esneklik uygulama kapsamını genişletme süreçleri için de söz konusudur.

Vue-CLI (3.x) Kullanımı

@vue/cli hızlı bir şekilde Vue.js uygulamaları geliştirmemize yardımcı olan ve ihtiyaç duyabileceğimiz tüm moden geliştirme araçlarını barındıran bir geliştirme aracıdır. Bu kapsamlara sahiptir¹:

• @vue/cli ile etkileşimli proje iskeleti,
• @vue/cli + @vue/cli-service-global aracılığıyla, sıfır yapılandırma ve hızlı prototipleme,
• @vue/cli-service ile işlem bağımlılıklarının yürütülmesi,
  • Yükseltme işlemleri,
  • Webpack üzerine geliştirme,
  • Config yapılandırmaları,
  • Eklentiler aracılığıyla uygulama genişletme.
• Front-end ekosistemindeki en iyi ve zengin geliştirme ortamı,
• Vue.js projeleri oluşturmak ve yönetmek için tam bir grafik kullanıcı arayüzü.

Vue CLI Bileşenleri

Vue CLI birkaç ek bileşenden oluşur.

CLI

@vue/cli global olarak yüklenmiş bir NPM paketidir ve terminal aracılığıyla vue komutlarının işleme alınmasını sağlar. Komutlar sayesinde kolaylıkla yeni projeler oluşturulabilir (cerate), fikirler prototipler haline getirilebilir (serve). Ek olarak, terminalin yanı sıra, Vue UI sayesinde (ui) projeler bir trafik arayüzü üzerinden de işleme alınabilmektedir.

CLI Service

CLI Service (@vue/cli-service) geliştirme işlemlerinde kullanılır. Lokal olarak CLI (@vue/cli) aracılığıyla oluşturulan (create) her projede yer alan bir npm paketidir. CLI Service webpack ve webpack-dev-server üzerine yapılandırılır ve şunları içerir:

• Çekirdek servis CLI eklentileri (plugins) yükler,
• Çoğu uygulama için optimize edilmiş dahili web paketi yapılandırmasını yapar,
• Proje içerisinde yer alan vue-cli-service basit serve, build ve inspect komutlarıyla birlikte gelir.

CLI Plugins

CLI Plugins, npm paketleri olarak opsiyonel olarak sunulan Babel/TypeScript, ESLint entegrasyonu, unit testing ve end-to-end testing gibi özelliklerden oluşur. Bir Vue CLI eklentisi @vue/cli-plugin- (ön tanımlı eklentiler) veya vue-cli-plugin- (diğer eklentiler için) şeklinde ayırt edilebilir. Proje içeriğinde, vue-cli-service binary dosyası çalıştırıldığında, projeye ait package.json içeriğinde listelenen tüm CLI Plugins otomatik bir şekilde işleme alınır. Elbette eklenti kullanımı proje oluşturma aşamasından sonra da ele alınabilir ve tekrar kullanılabilir halde başka projelere aktarılabilirler.

Vue CLI Kurulumu

Vue CLI Node.js versiyon 8.9 veya üzeri (8.11.0+ tavsiye edilir) gerektirir ve şu komutlar aracılığıyla global olarak sisteme kurulabilir:

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

Eğer, Vue CLI @vue/cli yerine vue-cli paketi kurulu ise (3.x ile birlikte değişiklik oldu) önceki paketi npm uninstall vue-cli -g veya yarn global remove vue-cli (bkz. YARN Nedir?) ile kaldırıp yeni paketi kurmanız gerekmektedir.

Kurulumun başarıyla tamamlanmasının ardından vue komutu ile vue binary erişimi sağlayabiliriz. Örnek olarak kurulu Vue CLI sürümünü kontrol edelim:

vue --version

Vue CLI Komutları

Vue CLI ile gerçekleştirebileceğimiz işlemlere, kullanabileceğimiz komutlara adım adım bakalım. İlk komutumuz serve ve build. Çünkü, Vue serve ve vue build komutları ile herhangi bir konfigürasyon işlemiyle uğraşmadan, tek bir *.vue (single-file component) ya da *.js dosyasıyla hızlı bir şekilde prototip oluşturabiliriz².

Yukarıda bahsi geçen işlemde ön tanımlı olarak main.js, index.js, App.vue veya app.vue isimlerine bakılır. Elbette komutu ilgili dosya dizininde işleme almamız gerekmekte. Ön tanımlı dosya isimlerinin tercih edilmediği durumlarda dosya ismi ayrıca belirtilmelidir. Hemen bir örnek işlem gerçekleştirelim. Şu içeriğe sahip bir App.vue dosyamız olsun:

<template>
  <h1>Hello World!</h1>
</template>

vue serve

Terminal üzerinden dosyanın bulunduğu dizine geçip vue serve komutunu çalıştırdığımızda development server başlatılacak ve bize uygulamanın çalıştırıldığı URI döndürülecektir. Örneğin:

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.3:8080/

Belirtilen adres üzerinden uygulamaya eriştiğimizde, açılan sayfanın kaynak kodunun aşağıdaki gibi olduğunu görebilirsiniz:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue CLI App</title>
  <link href="/app.js" rel="preload" as="script"></head>
  <body>
    <div id="app"></div>
  <script type="text/javascript" src="/app.js"></script></body>
</html>

Diğer yandan, bulunduğumuz dizinde de node_modules klasörü oluşturulmuş ve eğer var ise ilgili paketler de dahil edilmiş olacaktır. App.vue yerine farklı bir dosya ismi kullanmış olsaydık (örneğin newComponent.vue) komutumuzu şu şekilde uygulamamız gerekirdi:

vue serve newComponent.vue

Unutmadan, vue serve komutu vue create komutuyla aynı ön tanımlı kurulum ayarlarını (webpack, babel, postcss & eslint) kullanır.

vue build

Uygulama production için yapılandırılır ve işlemin tamamlanmasının ardından node_modules klasörünün yanı sıra dist klasörü ve klasör içerisinde de uygulamanın build edilmiş hali yer alır. Ayarlar serve komutuyla aynıdır. vue build komutu beraberinde -t (app | lib | wc | wc-async, ön tanımlı: app) ile hedef, -n (lib | web-component, ön tanımlı: dosya adı) ile ad, -d (çıktı yolu, ön tanımlı: dist) ile çıktının işleneceği klasör ifadelerini alabilir.

vue create

Yeni bir proje oluşturmak istediğimizde vue create komutunu bir argüman () ile birlikte kullanırız. Örneğin, hello world adında bir uygulama oluşturalım.

vue create hello-world

Komutu uygulamamızın ardından bizden prompt aracılığıyla preset seçimleri (babel, eslint, el yordamı ile yapılandırma gibi) yapmamız istenecek. Aşağı-yukarı tuşları ile seçenekler arasında gezinebilir, uygulanmasını istediğimiz seçimler için Enter tuşu ile devam edebiliriz. Seçimlerin tamamlanmasının ardından, onay vererek yapılandırma sürecini belirtilen ayarlar doğrultusunda başlatabiliriz.

Yaklaşık 1 dakikalık bir sürede, node_modules, public, src klasörlerinin ve babel.config.js, package.json dosyalarının oluşturulmasıyla birlikte, yapılandırma işlemi tamamlanacaktır. Ardından serve komutu ile (development server) uygulamamızı tarayıcı aracılığıyla görüntüleyebiliriz.

cd hello-world
yarn serve

Build işlemi için ise yarn build komutunu kullanabiliriz. Tüm bu işlemleri vue ui aracılığıyla da oluşturmamız mümkün. Bunun için vue ui komutunu kullanmamız yeterli.

Genel olarak http://localhost:8000/project/select üzerinden görüntülenecek GUI ile oluşturulan projeleri görüntüleyebilir, yeni projeler oluşturabilir ve proje ayarlarını içe aktarabiliriz.

vue add

vue create komutunu kullandığımızda bazı eklentilerin (plugin) yapılandırma sürecinde ön yüklendiğinden bahsetmiştim. Bu sürecin tamamlanmasının ardından, projenin ilerleyişine istediğimiz zaman yeni eklentileri de çalışma alanımıza dahil edebilmekteyiz. Bu amaçla kullandığımız komutumuz ise vue add. Hemen örnek olarak bir plugini çalışma alanımıza dahil edelim.

vue add @vue/eslint

Yukarıdaki komutu uyguladığımızda vue için oluşturulmuş olan eslint eklentisini çalışma alanımıza dahil etmiş oluruz. Unutmadan ekleyeyim, vue add komutu sadece Vue CLI eklentileri için tasarlanmıştır. Dolayısıyla npm paketlerinin yapılandırılması gibi özellikler sunmaz. Bu gibi gereksinimleri yine paket yönetici aracılığıyla karşılamanız gerekir. Eklenti tanımlamalarında kısaltmalar kullanılabilir. Örneğin, eslint eklentisinin tam tanımı @vue/cli-plugin-eslint şeklindedir. Resmi olmayan bir uygulama için de yine kısaltmalar kullanılabilir. vue add vue-cli-plugin-apollo ve vue add apollo aynı eklentiyi ifade etmektedir.

Eklentiler ile ilgili diğer notları Plugins and Presets başlığı altında görüntüleyebilirsiniz³.

vue init

Hazır yapılandırmaları / şablonları (template) kullanarak projeler geliştirmek istediğimizde vue init komutundan faydalanabiliriz. Genel kullanımı şu şekildedir:

vue init [options] <template> <app-name>

Uzak template bağlantıları için (örneğin bir git clone) ise @vue/cli-init eklentisinin çalışma alanına dahil edilmesi (add) gerekmektedir. Webpack, PWA, Webpack-simple, Simple, Browserify ve Browserify-simple gibi hazır şablonlara vuejs-templates⁴ üzerinden ulaşabilirsiniz.

Son Notlar

Vue CLI ile ilgili bahsi geçen konular dışında da pek çok detay mevcut. Başlangıç aşamasında çok ihtiyaç duymayacağımızı düşünerek bu yazıya dahil etmedim. Ancak, yeri geldikçe ilgili konular altında ve elbette yine bu sayfaya güncelleme olarak dahil etmeye çalışacağım. Eğer, ilgili tüm bilgileri görüntülemek isterseniz elbette Vue dökümantasyonu⁵ muhtemel sorularınıza dair tüm cevaplara sahiptir. Ayrıca sorularınız olursa, yorum olarak iletmeniz durumunda yazıya dahil ederim.