g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

2020'de, araç kutusuna eklenmesi gereken en iyi 11 VueJS geliştirici aracı

Tam metin 3283 Kelimeler, tahmini öğrenme süresi 10 dakika

Kaynak: Unsplash

Bu sefer Xiaoxin, herkes için 11 üst düzey VueJS geliştirici aracı düzenledi.

Vue JS, esas olarak insanların öğrenmesi ve uygulamaları geliştirmesi için kolaylık sağladığı için son zamanlarda daha popüler hale geldi. Vue'yu kullanmak isteyen ister deneyimli bir geliştirici ister acemi bir kişi olsun, doğru araçları kullanmak gerekir. Bu, tekrarlayan işler yapmak zorunda kalmadan hızlı bir şekilde harika uygulamalar oluşturmanıza yardımcı olacaktır.

Xiaoxin, bu makalenin listesi için araçlar seçerken tüm Vue JS geliştirme döngüsünü değerlendirdi. Yeni bir uygulama için bir şablon dosyası oluşturmaktan başlayarak, birçok önemli uygulama konseptini, hata ayıklamayı ve hatta testi kapsar.

Görmeye değer, söylenecek fazla bir şey yok, hemen başlayalım ~

Kaynak: Unsplash

1. Aksiyolar

Axios, ajax isteklerini oluşturmak ve yönetmek için popüler bir üçüncü taraf kitaplığıdır. Vue'nun eski "resmi" ajax kütüphanesi "vue kaynaklarını" havuzundan ayırdıktan sonra, Vue ekibinin ilk tercihi Axios'tur. Bu, Axios'un popülaritesini artırdı ve kullanıcı sayısı arttı.

Bu fenomenin nedeni çok iyidir Axios resmi Vue deposunun bir parçası olmasa da, kendi selefine çok benzer ve çok yönlüdür, iptal işlevlerini destekler ve TypeScript tanımlarına sahiptir. Axios kullanmanın bir avantajı, sunucunun kendisi vaatleri desteklemiyorsa, kullanıcıların kendi alt komut dosyalarını sağlamaları gerekmesidir.

2. Vue Apollo

GraphQL, API kullanan çok yönlü bir araçtır. Uygulama veya işlevin gerektirdiği uygun verilerin sorgulanmasına izin verir. VueApollo, GraphQL'i Vue ile kullanmanın en uygun yoludur.

Apollo'nun bileşenleri, GraphQL'i gerçekten bildirimsel bir şekilde kullanmaya yardımcı olur. Apollo'nun özü, veri alışverişini kolaylaştırmak için arka uç uygulamalar için bir model dili ve ön uç uygulamalar için bir sorgu dili sağlamaktır. Ayrıca sunucu tarafında oluşturmayı da destekler, böylece HTML sunucu tarafında işlenebilir.

3. Vuex

Durum yönetimi, birçok geliştiricinin çözmeye çalıştığı büyük bir sorundur. Makul durum kontrolünün olmaması, uygulamanın tahmin edilemez olduğu anlamına gelir. Vuex bu soruna bir çözüm sağlar, tüm durum yönetimi işlevlerini yoğunlaştırır ve yalnızca durumların tahmin edilebilir bir şekilde değişmesine izin verir.

Vuex, duruma, görünüme ve eyleme dayalı değişikliklere izin verir. Durum açıkça uygulamanın gerçek durumuyla ilgilidir; görünüm, kullanıcıya gerçek durumu gösterir, eylem durumun değişmesine neden olur ve değişim döngüsü yeniden başlatılır.

Vue yönlendiricileri, sıfır konfigürasyonlu zaman geçmişi analizi ve hata ayıklama ve durum anlık görüntü verme veya alma gibi işlevler de sağlar.

4. Mocha

Test, uygulamanın önemli bir yönüdür. Uygulamanın müşteri beklentilerini karşılamasını ve uygulamanın doğru bir şekilde geliştirilmesini sağlar. Bu, Vue veya JavaScript çerçeveleriyle oluşturulan uygulamalar için daha da önemlidir.

Bu hedefe ulaşabilecek birçok çerçeve olmasına rağmen, Mocha'yı seçtim çünkü arka uçta veya Node.JS aracılığıyla ön uçta çalıştırılabilir. Bu, eşzamansız testi doğrulama sürecinin her iki ucunda da uygun ve anlamlı kılar. Yakalanmamış istisnaları GitHub ile ilgili test durumlarıyla eşleme yeteneği, bu istisnaları izlemeyi ve çözmeyi kolaylaştırır.

5. Nuxt JS

VueJS kurulduktan sonra, bir uygulama oluşturmanın ilk adımı iyi bir şablon dosyası oluşturmaktır. Bu, sıfırdan kod yazmaktan kaçınmanıza yardımcı olacaktır. Şablon dosyaları oluşturmak için birçok seçenek vardır, ancak bu liste Next JS'yi seçer çünkü sunucu tarafı oluşturma (SSR), aşamalı web uygulamaları (PWA), tek sayfa uygulamaları (SPA) gibi birden çok uygulama türünün oluşturulmasına izin verir. ) Ve statik bir web sitesi.

Nuxt, geliştirme sürecini hızlandırmak için 50'den fazla modülden oluşan modüler bir mimariye sahiptir. Bu modüller, aşamalı web uygulamaları edinme, Google analitiği ekleme veya site haritaları oluşturma gibi belirli görevleri destekler.

Ayrıca, analizörleri bir araya getirerek Vue JS ve Node.JS'nin en iyi uygulamalarını uygular ve böylece anlık performans ayarı sağlar.

6. Resmi Vue.js Kılavuzu

İnsanlar Vue ve tüm harika araçlarıyla ilgileniyorsa, daha fazla bilgi için resmi Vue JS kılavuzu en iyi seçimdir.

Bu kılavuz, Vue'nun tüm güncel ve geçmiş sürümleri için geçerlidir, bu nedenle ister yeni başlayan ister eski sürüme dayalı mevcut bir uygulamayı geliştirmek veya genişletmek isteyen bir kullanıcı olun, ondan çok şey öğrenebilirsiniz. Sürüm geçmişi aracılığıyla bileşen değişikliklerini karşılaştırmak da kolaydır.

Ek olarak videolar, kod parçacıkları ve etkileşimli uygulamalar da kılavuzun etkileşimini artırarak anlaşılmasını kolaylaştırır. Kılavuzun son bölümü diğer çerçeveleri (React ve Angular gibi) karşılaştırır ve çok kullanışlıdır. Bu, bu tür çerçevelere aşina olan geliştiricilerin Vue'ye uyum sağlamasını sağlayacaktır.

7. Vue için Bit

Örnek: bit.dev'de paylaşılan Vue bileşeni

Bit, yeni nesil Vue bileşen kitaplıkları oluşturmanın harika bir yoludur. Depolar arasında kullanıcı arayüzü bileşenlerini paylaşma ve koordine etme sorununu çözer. Ayrıca, kullanıcı arayüzünü paylaşılan bileşenlerle (bağımsız geliştirme, sürüm kontrolü ve güncellemeler) birleştirmenin etkili bir yoludur.

Geliştiriciler, bileşenleri bit.dev platformunda barındırabilir ve düzenleyebilir. Bileşen kitaplığı bir CD müzik albümü gibiyse, Bit.dev iTunes gibidir. Bit.dev, sürüm kontrolü için Bit'in CLI aracını kullanır ve yerel projeden bağımsız bileşenleri, bağımsız bileşenlerin organize edildiği, kaydedildiği, işlendiği ve kurulabileceği veya içe aktarılabileceği Bit.dev'in favorilerine iter.

React vb. İle de kullanılabilir.

Geliştirici ekipleri, Bit.dev'de yeni projelerdeki bileşenleri arayabilir, oluşturabilir, kurabilir ve hatta güncelleyebilir. Platformun otomatik bileşen dokümantasyonu, sanal alan oluşturma ve diğer işlevler kolayca kullanılabilir.

Bit, bağımsız bileşenlerin bağımlılıklarının izlenmesinde ve sürümlerinin bağımsız kod birimleri olarak kontrol edilmesinde büyülü bir rol oynar. Ayrıca, gerçekten yeniden kullanılabilir olduklarından emin olmak için paylaşılan bileşenleri izole bir ortamda oluşturabilir ve test edebilir ve ardından bunları yerel projeden bit.dev sık kullanılanlarına aktarabilir.

8. Tarayıcı için Vue.js DevTools

Hata ayıklama, etkili bir geliştirme süreci için çok önemlidir. İyi hata ayıklama araçları olmadan, uygulamanın çalışma durumunu anlamak neredeyse imkansızdır. Vue JS tarafından önerilen resmi hata ayıklama araçları dışında, daha iyi bir seçeneğim var mı?

Firefox ve Chrome tarayıcıları için eklentilerin yanı sıra her ortam için bağımsız elektronik uygulamalara sahiptir. Tarayıcı eklentisi, hata ayıklama deneyimini daha sorunsuz ve çalıştırmayı kolaylaştırmak için yerel geliştirici araçlarına "Vue" sekmesini ekler.

9. Vue CLI

Diğer JavaScript çerçevelerinde olduğu gibi, CLI araçları olmadan Vue'da pek çok şey yapamazsınız. CLI, proje yapısının hızlı bir şekilde oluşturulmasına ve şablon dosyalarının konuşlandırılmasına izin verir. Ayrıca, yeni özellikleri sergilemek için anlık prototiplerin oluşturulmasına izin verir.

Yaygın yardımcı projelere ek olarak, Vue CLI ayrıca TypeScript, Babel, PostCSS, ESLint, birim testi, PWA ve uçtan uca test gibi web geliştirme araçları için daha fazla destek sağlayacaktır. Ayrıca topluluk tarafından oluşturulabilen üçüncü taraf eklentileriyle de uyumludur.

Vue CLI'nin bir başka yararı da açılmasına gerek olmamasıdır. Diğer bir deyişle, diğer çerçevelerle karşılaştırıldığında, daha fazla özelleştirme işi yapmak için Vue CLI'yi kullanabilirsiniz. Vue CLI'nin grafik kullanıcı arayüzü en önemli özelliktir, yeni projelerin oluşturulmasına izin verir ve yönetimi çok kolaydır.

10. Vuetify

Adından da anlaşılacağı gibi, Vuetify, "Vue" ve "Beautify" kelimelerinin birleşiminden oluşuyor ve bu tam olarak Vuetify'ın yaptığı şey. Kullanıcı ister tasarımcı olsun ister olmasın, mükemmel el yapımı kullanıcı arayüzü bileşenlerinden oluşan bir kitaplıktır, mükemmel uygulamalar oluşturmaya yardımcı olur.

Vuetify, bir Vue CLI eklentisine sahip olan ve hazır proje iskelesi sağlayan malzeme tasarım spesifikasyonuna dayalı 80'den fazla bileşen sağlar. Sunucu tarafı işleme desteği de yerleşiktir. Bu bileşenler arasında alarmlar, afişler, rozetler, düğmeler, form girişleri ve kontrolleri, ilerleme widget'ları vb. Bulunur.

11. Vue yönlendirici

Diğer JavaScript çerçevelerine aşina olanlar için yönlendirme yeni bir kavram olmamalıdır. Yönlendirici, URL uygulamalarını bileşenlere eşlemek için kullanılır. Bu noktada, Vue yönlendirici harika bir iş çıkarır ve bileşen tabanlı yönlendirici yapılandırmasını destekler.

Ek olarak, karmaşık yönlendirmeye izin vermek için, Vue yönlendiricileri ayrıca yönlendirici parametrelerini, sorguları ve joker karakterleri de destekler. Diğer çerçevelerle karşılaştırıldığında, geçiş efektleri gibi özellikler, yönlendirmeyi değiştirmeyi daha çekici hale getirir ve aktif bilgisayar sistemi simülasyonu (CSS) ile bağlantılar, Vue yönlendiricilerinin daha fazla hizmet sağlamasına izin verir.

Vue yönlendirici ayrıca kullanıcıların HTML5 geçmişi ve karma mod arasında seçim yapmasına olanak tanır. Bu kritiktir, çünkü özellikle uygulama kullanıcının önceki sayfaya gitmesini gerektirdiğinde kullanıcı deneyimini etkiler.