e
sv

VUE CLI ile VUE JS Uygulama Oluşturma

VUE CLI ile VUE JS Uygulama Oluşturma
avatar

Yazılım Method

  • e 1

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Vuejs prograsif javascript framworküdür.Genel olarak tek sayfa(S.S.A) veya jquery gibide kullanabilirsiniz. Kendi içerisinde pluginleri veya 3.parti pluginleri kullanabilir ve çalıştırabileceğiniz bir framworktür.Router ve http isteklerinizi yapabileceğiniz hemde state oluşturabilecek pluginlere sahiptir.

Vue React ve Angular dan daha hızlı ve kullanışlı olduğunu söyleyebilirim . Diğerleride kendi çapında çok güzel framworklerdir. Vue için en popüler pluginler :

  • Vuex
  • Vue Router
  • Vue Rescourse
  • Vuetify (Uİ KİT)
  • Axios ( third party)

ve daha fazlası kullanılmakta internet üzerinde de yeterince dökuman bulunmakta ve uygulamanızı geliştirirken kullanabilirsiniz 🙂

VUE ile uygulama geliştirirken yazılımcılar için bir server ortamı kurmamız gerek ve hot server olmalı yani biz işlem yaptığımızda otomatik olarak sayfayı yenilemeli. Modem üzerindede port açabiliyorsa süper bişiler olur :d . Bu isteklerimizi karşılayan bir aracımız var buda VUE CLİ bizler için bir server ortamı ve build gibi olanaklar sunuyor.

VUE CLI Nedir ?

Vue için yazılımcılar için bir geliştirme ortamı oluşturmaktadır. Webpack , Babel ,vs gibi eklentilerin configrasyonlarına gerek kalmadan development süreci yaşatmaktadır 🙂 daha ne olsun. Yazmış olduğunuz kodları ES5’e çevirerek eski tarayıcıların anlayableceği bir yapıya çevirmektedir.

Vue CLI için bilgisayarınızda node js yüklü olması gerekledir zaten paket yönetim araçlarıyla kolayca yüklüyebilirz. Vue CLI bize Vue uygulamaızda kullanacağımız pluginleri(eslint,babel) gibi araçları kendimizin seçmesine olanak sağlar. CLI servisi bizler için :

  • Babel, TypeScript, ESLint, PostCSS, PWA, Birim Testi ve Uçtan Uca Test için kullanıma hazır destek.
  • Eklenti sistemi, topluluğun ortak ihtiyaçlara yeniden kullanılabilir çözümler oluşturmasına ve paylaşmasına olanak tanır.
  • Vue CLI, çıkarmaya gerek kalmadan tamamen yapılandırılabilir. Bu, projenizin uzun vadede güncel kalmasını sağlar.
  • Eşlik eden bir grafik kullanıcı arayüzü aracılığıyla projelerinizi oluşturun, geliştirin ve yönetin.
  • Tek bir Vue dosyasıyla yeni projeleri anında prototipleyin.
  • Modern tarayıcılar için yerel ES2015 kodunu zahmetsizce gönderin veya vue bileşenlerinizi yerel web bileşenleri olarak oluşturun.

VUE CLI Nasıl İndirilir ?

Bilgisayarınızda Node JS yüklü olmak zorundadır. Paket yönetimi için npm veya yarn yeterlidir. Öncelikle CLI servisini bilgisayarımıza genel olarak yüklememiz gerek çünkü bize çok lazım olacak proje oluştururken 😉 CLI bilgisayarınıza aşağıdaki kodu yazarak yüklüyebilirsiniz.

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

Eğer bilgisayarınıza yüklüyse sürümünü test etmek için terminale bu komutu yazın

vue --version
# EĞER DİĞER KOMUTLAR İÇİN
vue --help

VUE CLI ile Proje Nasıl Oluşturulur ?

İlk olarak cli servisinin bilgisayarımızda yüklü olması gerek. Yüklü olan bilgisayarda ister kendi development ortamında neler seçeceğinizi kendinizde belirleyebilirsiniz yada sizler için varsayılan seçenekleri kullanabilirsiniz

VUE 2 , VUE 3 için varsayılan kurulumlarda bulunmaktadır. Custom olarakta kurulum yapabilirsiniz custom olarak yaptığınızıda kaydetip tekrara kullanmanızıda sağlar. Uygulamamız için geliştirici ortamı yapmak için terminale bu komutu yazın. Uygulamanızı kurarken istediğiniz dizinde olduğunuza dikkat edin 😉

vue create vue-uygulamam
Vue Cli ile uygulama oluşturma
Vue Cli ile uygulama oluşturma

Eğer kendinize özel geliştirme ortamı oluştururken size aşağıdaki alternatifleri sunmaktadır.

  • Vue uygulama sürmünü seçme
  • Babel Sürümünü Seçme
  • Typescript kullanımı
  • Progressive Web App (PWA)
  • Router
  • Vuex (State Yönetim)
  • Linter / Formatter
  • Unit Testing / E2E Testing

Bunları seçerek hareket ettikten sonra bu ayarlarınızı daha sonraki projeniz içinde kayıtedebilirsiniz. Uygulamanızı oluşturmanız biraz zaman alabilir kurduktan sonra uygulamanızın dizinine girin cd uygulama-ismi sonra size böyle bir dizin vermektedir.

├───node-modules
├───public
└───src
    ├───assets
    └───components

Vue CLI ile Uygulamayı Çalıştırmak ve Build Etmek

Cli kullandığımız için bu işlemler çok basittir. Hem development sürecinde biz yerel ortamda server açar ve wifi ağı üzerindede diğer kullanıcıların görmesine olanak sağlamaktadır. Aşağıdaki kodlar uygulamayı nasıl çalıştıracağınız ve build kodlarıdır

# Uygulamanızı Kalkındırmak İçin
npm run serve



# Uygulamanızı Build Etmek İçin
npm run build

Vue CLI dökümantasyonuna buradan ulaşabilirsiniz.

  • Vue JS 'te Vuex ile State Yönetimi – Yazılım Method
    1 sene önce

    […] VUE CLI ile VUE JS Uygulama Oluşturma […]

    yorum beğen
  • Vue JS vs React Karşılaştırması – Yazılım Method
    1 sene önce

    […] Fakat Bu noktada en önemli seçim, sizin ilerleme ve işlem arzunuzda yatmaktadır. Kendi ihtiyaçlarınızı ve programla diline ilgilinizi ölçerek, VUE JS vs REACT konusunda karar verebilirsiniz. Vue cli ile ilk uygulamanızı buradaki yazıdan oluşturabilirsiniz. […]

    yorum beğen

Sıradaki içerik:

VUE CLI ile VUE JS Uygulama Oluşturma