Nuxt.js Kullanarak Sunucu Tarafı Oluşturulmuş Vue.js Uygulamaları Oluşturma

Vue gibi JavaScript çerçeveleri/kütüphaneleri, sitenize göz atarken harika bir kullanıcı deneyimi sunabilir. Çoğu, her seferinde sunucuya bir istek göndermek zorunda kalmadan sayfa içeriğini dinamik olarak değiştirmenin bir yolunu sunar.

Ancak, bu yaklaşımla ilgili bir sorun var. Web sitenizi ilk kez yüklerken, tarayıcınız görüntülenecek tam bir sayfa almıyor. Bunun yerine, sayfayı oluşturmak için bir sürü parça (HTML, CSS, diğer dosyalar) ve bunların nasıl bir araya getirileceğine dair talimatlar (bir JavaScript çerçevesi/kütüphanesi) gönderilir. Tüm bu bilgileri bir araya getirmek ölçülebilir bir zaman alır. tarayıcınızın gerçekten gösterecek bir şeyi olmadan önce. Düz bir kitaplık ile birlikte bir sürü kitap gönderilmiş gibi. Önce kitaplığı inşa etmelisin ve sonra kitaplarla doldurmalısın.

Bunun çözümü zekicedir: Sunucuda , görüntülenmeye hazır bir sayfa oluşturabilecek bir çerçeve/kütüphane sürümüne sahip olun. Ardından, bazı kitaplarla birlikte hazır bir kitaplık gönderilmesi gibi, daha fazla değişiklik yapma ve dinamik sayfa içeriğine (çerçeve/kütüphane) sahip olma yeteneğiyle birlikte bu tam sayfayı tarayıcıya gönderin. Tabii, yine de kitapları kitaplığa koymanız gerekiyor, ancak hemen kullanılabilir bir şeyiniz var.

Aptalca benzetmenin ötesinde, bir sürü başka avantaj da var. Örneğin, Hakkımızda sayfası gibi nadiren değişen bir sayfanın, kullanıcı her istediğinde yeniden oluşturulması gerekmez. Böylece bir sunucu onu bir kez oluşturabilir ve daha sonra önbelleğe alabilir veya ileride kullanmak üzere bir yerde saklayabilir. Bu tür hız iyileştirmeleri küçük görünebilir, ancak yanıt verme süresinin milisaniye (veya daha az) olarak ölçüldüğü bir ortamda, her küçük parça önemlidir.

Bir Vue ortamında SSR'nin avantajları hakkında daha fazla bilgi istiyorsanız, Vue'nin SSR hakkındaki kendi makalesine göz atmalısınız. Bu sonuçlara ulaşmak için çeşitli seçenekler var ancak en popüler olanı Vue ekibi tarafından da önerilen Nuxt.

Neden Nuxt.js

Nuxt.js, Next adlı popüler React kitaplığı için bir SSR uygulamasına dayanmaktadır. Bu tasarımın avantajlarını gördükten sonra Vue için Nuxt adında benzer bir uygulama tasarlandı. React+Next kombinasyonuna aşina olanlar, uygulamanın tasarımında ve düzeninde bir takım benzerlikler göreceklerdir. Ancak Nuxt, Vue için güçlü ancak esnek bir SSR çözümü oluşturmak için Vue'ye özgü özellikler sunar.

Nuxt, Ocak 2018'de üretime hazır 1.0 sürümüne güncellendi ve aktif ve iyi desteklenen bir topluluğun parçası. Harika şeylerden biri, Nuxt kullanarak bir proje inşa etmenin diğer herhangi bir Vue projesi inşa etmekten çok farklı olmamasıdır. Aslında, daha kısa sürede iyi yapılandırılmış kod tabanları oluşturmanıza izin veren bir dizi özellik sağlar.

Unutulmaması gereken bir diğer önemli nokta ise Nuxt'un SSR için kullanılmasına gerek olmamasıdır . Evrensel Vue.js uygulamaları oluşturmak için bir çerçeve olarak tanıtılır ve aynı kod tabanını kullanarak statik olarak oluşturulmuş Vue uygulamaları oluşturmak için bir komut ( nuxt generate ) içerir. Bu nedenle, SSR'nin derinliklerine dalmaktan endişe ediyorsanız, panik yapmayın. Nuxt'un özelliklerinden yararlanmaya devam ederken, bunun yerine her zaman statik bir site oluşturabilirsiniz.

Nuxt'un potansiyelini kavramak için basit bir proje oluşturalım. Bu projenin son kaynak kodunu görmek isterseniz GitHub'da barındırılıyor veya nuxt generate ve Netlify'da barındırılan canlı bir sürümü görüntüleyebilirsiniz.

Nuxt Projesi Oluşturma

Başlamak için, hızlı bir şekilde örnek bir proje oluşturmak için vue-cli adlı bir Vue proje oluşturucu kullanalım:

 # install vue-cli globally npm install -g vue-cli # create a project using a nuxt template vue init nuxt-community/starter-template my-nuxt-project

Birkaç seçenekten geçtikten sonra, bu, my-nuxt-project klasöründe veya belirttiğiniz her neyse içinde bir proje oluşturacaktır. O zaman sadece bağımlılıkları kurmamız ve sunucuyu çalıştırmamız gerekiyor:

 cd my-nuxt-project npm install # Or yarn npm run dev

Oraya gidiyoruz. Tarayıcınızı localhost:3000 açın ve projeniz çalışıyor olmalıdır. Bir Vue Webpack projesi oluşturmaktan pek farklı değil. Ancak, uygulamanın gerçek yapısına baktığımızda, özellikle Vue Webpack şablonu gibi bir şeyle karşılaştırıldığında, orada pek bir şey yok.

package.json bakmak, yalnızca bir bağımlılığımız olduğunu, Nuxt'un kendisine ait olduğunu gösteriyor. Bunun nedeni, Nuxt'un her sürümünün Vue, Vue-router ve Vuex'in belirli sürümleriyle çalışacak şekilde uyarlanmış olması ve hepsini sizin için bir araya getirmesidir.

Ayrıca proje kökünde bir nuxt.config.js dosyası vardır. Bu, Nuxt'un sağladığı bir dizi özelliği özelleştirmenize olanak tanır. Varsayılan olarak başlık etiketlerini, yükleme çubuğu rengini ve ESLint kurallarını sizin için ayarlar. Neleri yapılandırabileceğinizi merak ediyorsanız işte belgeler; Bu yazıda bazı seçenekleri ele alacağız.

Peki bu dizinler hakkında bu kadar özel olan ne?

Proje Düzeni

Oluşturulan dizinlere göz atarsanız, hepsinde, o dizinde neler olduğuna dair kısa bir özet ve genellikle belgelere bir bağlantı içeren bir Benioku dosyası bulunur.

Bu, Nuxt kullanmanın bir avantajıdır: uygulamanız için varsayılan bir yapı. Herhangi bir iyi ön uç geliştirici, buna benzer bir uygulama yapılandıracaktır, ancak yapılar hakkında birçok farklı fikir vardır ve bir ekip üzerinde çalışırken, bir süre kaçınılmaz olarak bu yapıyı tartışmak veya seçmek için zaman alacaktır. Nuxt sizin için bir tane sağlar.

Nuxt, belirli dizinleri arayacak ve bulduklarına bağlı olarak sizin için uygulamanızı oluşturacaktır. Şimdi bu dizinleri tek tek inceleyelim.

Sayfalar

Bu gerekli olan tek dizindir. Bu dizindeki herhangi bir Vue bileşeni, dosya adlarına ve dizin yapısına göre otomatik olarak vue-router eklenir. Bu son derece uygundur. Normalde zaten ayrı bir Sayfa dizini olurdu ve bu bileşenlerin her birini başka bir yönlendirici dosyasına manuel olarak kaydetmem gerekirdi. Bu yönlendirici dosyası, daha büyük projeler için karmaşık hale gelebilir ve okunabilirliği korumak için bölmeye ihtiyaç duyabilir. Bunun yerine, Nuxt tüm bu mantığı sizin için halledecektir.

Göstermek için, Pages dizini içinde about.vue adında bir Vue bileşeni oluşturabiliriz. Şunun gibi basit bir şablon ekleyelim:

 <template> <h1>About Page</h1> </template>

Kaydettiğinizde, Nuxt rotaları sizin için yeniden oluşturacaktır. Bileşenimizi about.vue olarak adlandırdığımıza göre, /about about'a giderseniz, o bileşeni görmelisiniz. Basit.

Özel olan bir dosya adı vardır. Bir dosyaya index.vue isim vermek, o dizin için bir kök yol yaratacaktır. Proje oluşturulduğunda, sayfalar dizininde sitenizin ana sayfası veya açılış sayfasıyla ilişkili olan bir index.vue bileşeni zaten vardır. (Geliştirme örneğinde, bu sadece localhost:3000 olacaktır.)

Peki ya daha derin yollar? Sayfalar dizinindeki alt dizinler, rotalarınızı yapılandırmanıza yardımcı olur. Dolayısıyla, bir Ürünü Görüntüle sayfası istiyorsak, Sayfalar dizinimizi şöyle bir şekilde yapılandırabiliriz:

 /pages --| /products ----| index.vue ----| view.vue

Şimdi, /products/view 'a gidersek, ürünler dizini içinde view.vue bileşenini göreceğiz. Bunun yerine /products öğesine gidersek, ürünler dizini içinde index.vue bileşenini görürüz.

/about sayfası için yaptığımız gibi, bunun yerine sayfalar dizininde neden bir products.vue bileşeni oluşturmadığımızı soruyor olabilirsiniz. Sonucun aynı olacağını düşünebilirsiniz, ancak iki yapı arasında bir fark vardır. Bunu yeni bir sayfa daha ekleyerek gösterelim.

Her çalışan için ayrı bir Hakkında sayfası istediğimizi varsayalım. Örneğin benim için bir Hakkında sayfası oluşturalım. /about/ben-jones bulunmalıdır. Başlangıçta, Sayfalar dizinini şu şekilde yapılandırmayı deneyebiliriz:

 /pages --| about.vue --| /about ----| ben-jones.vue

/about/ben-jones öğesine erişmeye çalıştığımızda, bunun yerine /about ile aynı olan about.vue bileşenini alırız. Burada neler oluyor?

İlginçtir ki, Nuxt'un burada yaptığı şey iç içe bir rota oluşturmaktır. Bu yapı, kalıcı /about bir rota istediğinizi ve bu rotanın içindeki her şeyin kendi görüş alanında yuvalanması gerektiğini önerir. vue-router'da bu, about.vue bileşeni içinde bir <router-view /> bileşeni belirtilerek belirtilir. Nuxt'ta bu, <router-view /> yerine sadece <nuxt /> kullanmamız dışında aynı kavramdır. Öyleyse, iç içe geçmiş rotalara izin vermek için about.vue bileşenimizi güncelleyelim:

 <template> <div> <h1>About Page</h1> <nuxt /> </div> </template>

Şimdi /about about'a gittiğimizde, daha önce sahip olduğumuz about.vue bileşenini sadece bir başlıkla alıyoruz. Ancak, /about/ben-jones öğesine gittiğimizde, bunun yerine başlık ve <nuxt/> yer tutucusunun olduğu yerde oluşturulan ben-jones.vue bileşenine sahibiz.

Başlangıçta istediğimiz bu değildi, ancak tıklandığında sayfadaki bir bölümü bilgileriyle dolduran kişilerin listesini içeren bir Hakkında sayfasına sahip olma fikri ilginç bir kavram, o yüzden şimdilik olduğu gibi bırakalım . Diğer seçeneği istiyorsanız, tek yapacağımız dizinlerimizi yeniden yapılandırmak. Sadece about.vue bileşenini /about dizininin içine taşımamız ve onu index.vue olarak yeniden adlandırmamız gerekir, böylece ortaya çıkan yapı şöyle olur:

 /pages --| /about ----| index.vue ----| ben-jones.vue

Son olarak, belirli bir ürünü almak için rota paramlarını kullanmak istediğimizi varsayalım. Örneğin, 64'ün product_id olduğu /products/edit/64 adresine giderek bir ürünü düzenleyebilmek istiyoruz. Bunu şu şekilde yapabiliriz:

 /pages --| /products ----| /edit ------| _product_id.vue

_product_id.vue bileşeninin başlangıcındaki alt çizgiye dikkat edin; bu, daha sonra $route.params nesnesinden veya Nuxt'un Bağlamındaki params nesnesinden erişilebilen bir rota parametresini belirtir (daha fazlası için). Paramın anahtarının, ilk alt çizgi olmadan bileşen adı olacağını unutmayın - bu durumda, product_id - bu nedenle onları proje içinde benzersiz tutmaya çalışın. Sonuç olarak, _product_id.vue içinde şöyle bir şeye sahip olabiliriz:

 <template> <h1>Editing Product {{ $route.params.product_id }}</h1> </template>

Vue-router kullanarak kurulumu zahmetli olacak daha karmaşık düzenler hayal etmeye başlayabilirsiniz. Örneğin, yukarıdakilerin hepsini aşağıdaki gibi bir rotada birleştirebiliriz:

 /pages --| /categories ----| /_category_id ------| products.vue ------| /products --------| _product_id.vue

/categories/2/products/3 ne göstereceğini tahmin etmek çok zor değil. _product_id.vue bileşenine, iç içe geçmiş bir products.vue bileşenine ve iki yol parametresine sahip olurduk: category_id ve product_id . Bu, eşdeğer bir yönlendirici yapılandırmasından çok daha basittir.

Konu üzerindeyken, yönlendirici yapılandırmasında yapma eğiliminde olduğum bir şey, yönlendirici korumaları kurmaktır. Nuxt bizim için yönlendiriciyi oluşturduğundan, bu işlem, beforeRouteEnter ile bileşenin kendisinde yapılabilir. Rota parametrelerini doğrulamak istiyorsanız, Nuxt validate adlı bir bileşen yöntemi sağlar. Dolayısıyla, bileşeni oluşturmaya çalışmadan önce product_id bir sayı olup olmadığını kontrol etmek isterseniz, _product_id.vue dosyasının komut dosyası etiketine aşağıdakini eklersiniz:

 export default { validate ({ params }) { // Must be a number return /^\d+$/.test(params.product_id) } }

Şimdi, bazı ürünler geçerli bir sayı olmadığından /categories/2/products/someproduct someproduct ile sonuçlanır.

Sayfalar dizini için bu kadar. Bu dizinde rotalarınızı nasıl düzgün bir şekilde yapılandıracağınızı öğrenmek çok önemlidir, bu nedenle Nuxt'tan en iyi şekilde yararlanmak için başlangıçta biraz zaman harcamak önemlidir. Kısa bir genel bakış arıyorsanız, yönlendirme için dokümanlara başvurmak her zaman yararlıdır.

Yönlendiricinin kontrolünün sizde olmadığından endişeleniyorsanız, olmayın. Bu varsayılan kurulum, iyi yapılandırılmış olmaları koşuluyla çok çeşitli projeler için harika çalışır. Ancak, yönlendiriciye, Nuxt'un sizin için otomatik olarak oluşturduğundan veya bunları yeniden yapılandırdığından daha fazla yol eklemeniz gerekebileceği bazı durumlar vardır. Nuxt, yapılandırmada yönlendirici örneğini özelleştirmenin bir yolunu sağlayarak yeni yollar eklemenize ve oluşturulan yolları özelleştirmenize olanak tanır. Nuxt tarafından eklenen ekstra seçenekler de dahil olmak üzere yönlendirici örneğinin temel işlevlerini de düzenleyebilirsiniz. Bu nedenle, bir uç durumla karşılaşırsanız, uygun çözümü bulma esnekliğine sahip olursunuz.

Mağaza

Nuxt, Pages dizinine benzer şekilde, mağaza dizininin yapısına dayalı olarak Vuex mağazanızı oluşturabilir. Bir mağazaya ihtiyacınız yoksa, dizini kaldırmanız yeterlidir. Mağaza için Klasik ve Modüller olmak üzere iki mod vardır.

Klasik, mağaza dizininde bir index.js dosyasına sahip olmanızı gerektirir . Orada bir Vuex örneği döndüren bir işlevi dışa aktarmanız gerekir:

 import Vuex from 'vuex' const createStore = () => { return new Vuex.Store({ state: ..., mutations: ..., actions: ... }) } export default createStore

Bu, normal bir Vue projesinde Vuex kullanmak gibi, mağazayı istediğiniz gibi oluşturmanıza olanak tanır.

Modüller modu ayrıca mağaza dizininde bir index.js dosyası oluşturmanızı gerektirir . Ancak, bu dosyanın yalnızca Vuex mağazanız için kök durumunu/mutasyonları/eylemleri dışa aktarması gerekir. Aşağıdaki örnek, boş bir kök durumu belirtir:

 export const state = () => ({})

Ardından, mağaza dizinindeki her dosya, mağazaya kendi ad alanında veya modülünde eklenecektir. Örneğin, mevcut ürünü depolamak için bir yer oluşturalım. Mağaza dizininde product.js adlı bir dosya oluşturursak, mağazanın ad alanlı bir bölümü $store.product adresinde bulunacaktır. İşte bu dosyanın nasıl görünebileceğine dair basit bir örnek:

 export const state = () => ({ _id: 0, title: 'Unknown', price: 0 }) export const actions = { load ({ commit }) { setTimeout( commit, 1000, 'update', { _id: 1, title: 'Product', price: 99.99 } ) } } export const mutations = { update (state, product) { Object.assign(state, product) } }

Yükleme eylemindeki setTimeout , mağazayı yanıtla güncelleyecek bir tür API çağrısını simüle eder; bu durumda, bir saniye sürer. Şimdi bunu products/view sayfasında kullanalım:

 <template> <div> <h1>View Product {{ product._id }}</h1> <p>{{ product.title }}</p> <p>Price: {{ product.price }}</p> </div> </template> <script> import { mapState } from 'vuex' export default { created () { this.$store.dispatch('product/load') }, computed: { ...mapState(['product']) } } </script>

Unutulmaması gereken birkaç şey: Burada, bileşen oluşturulduğunda sahte API'mizi çağırıyoruz. Gönderdiğimiz product/load eyleminin Ürün altında ad alanı olduğunu görebilirsiniz. Bu, mağazanın tam olarak hangi bölümüyle uğraştığımızı açıkça ortaya koyuyor. Ardından, durumu yerel bir hesaplanmış özelliğe eşleyerek onu şablonumuzda kolayca kullanabiliriz.

Bir sorun var: API çalışırken bir saniyeliğine orijinal durumu görüyoruz. Daha sonra bunu düzeltmek için Nuxt tarafından sağlanan bir çözümü kullanacağız ( fetch olarak bilinir).

Bunu tekrar vurgulamak için, Nuxt paketine zaten dahil olduğu için npm install vuex zorunda kalmadık. Mağaza dizinine bir index.js dosyası eklediğinizde, tüm bu yöntemler size otomatik olarak açılır.

Açıklanan ana iki dizin budur; geri kalanı çok daha basit.

Bileşenler

Bileşenler dizini, gezinme çubuğu, resim galerisi, sayfalandırma, veri tabloları vb. gibi yeniden kullanılabilir bileşenlerinizi içermek için oradadır. Sayfalar dizinindeki bileşenler rotalara dönüştürüldüğünde, bu tür bileşenleri depolamak için başka bir yere ihtiyacınız vardır. Bu bileşenlere, içe aktarılarak sayfalardan veya diğer bileşenlerden erişilebilir:

 import ComponentName from ~/components/ComponentName.vue

Varlıklar

Bu, derlenmemiş varlıkları içerir ve Nuxt'un nasıl çalıştığından çok Webpack'in dosyaları nasıl yüklediği ve işlediğiyle ilgilidir. İlgileniyorsanız, BeniOku'daki kılavuzu okumanızı öneririm.

Statik

Bu, sitenizin kök dizinine eşlenen statik dosyaları içerir. Örneğin, bu dizine logo.png adlı bir resim koymak, onu /logo.png kullanılabilir hale getirir. Bu, robots.txt, favicon.ico gibi meta dosyalar ve ihtiyacınız olan diğer dosyalar için iyidir.

Düzenler

Normalde, bir Vue projesinde, normalde App.vue olarak adlandırılan bir tür kök bileşeniniz vardır. Burada, bir gezinme çubuğu, altbilgi ve ardından vue yönlendiriciniz için bir içerik alanı içerebilen (normalde statik) uygulama düzeninizi ayarlayabilirsiniz. default düzen tam olarak bunu yapar ve sizin için düzenler klasöründe sağlanır. Başlangıçta, sahip olduğu tek şey <nuxt /> bileşenine sahip bir div'dir (bu, <router-view /> ile eşdeğerdir) ancak istediğiniz gibi şekillendirilebilir. Örneğin, çeşitli tanıtım sayfalarında gezinmek için örnek projeye basit bir gezinme çubuğu ekledim.

Uygulamanızın belirli bir bölümü için farklı bir düzene sahip olmak isteyebilirsiniz. Belki farklı görünen bir çeşit CMS veya yönetici paneliniz vardır. Bunu çözmek için, Düzenler dizininde yeni bir düzen oluşturun. Örnek olarak, fazladan bir başlık etiketi olan ve gezinme çubuğu olmayan bir admin-layout.vue düzeni oluşturalım:

 <template> <div> <h1>Admin Layout</h1> <nuxt /> </div> </template>

Ardından, Pages dizininde bir admin.vue sayfası oluşturabilir ve o bileşen için kullanmak istediğimiz layoutun adını (dize olarak) belirtmek için Nuxt tarafından sağlanan layout adlı bir özelliği kullanabiliriz:

 <template> <h1>Admin Page</h1> </template> <script> export default { layout: 'admin-layout' } </script>

Hepsi bu kadar. Sayfa bileşenleri, belirtilmediği sürece default düzeni kullanır, ancak /admin öğesine gittiğinizde artık admin-layout.vue düzenini kullanır. Tabii ki, bu düzen dilerseniz birkaç yönetici ekranında paylaşılabilir. Hatırlanması gereken önemli bir şey, düzenlerin bir <nuxt /> öğesi içermesi gerektiğidir .

Düzenler hakkında not edilmesi gereken son bir şey var. Geçersiz bir URL yazarsanız, size bir hata sayfası gösterildiğini denerken fark etmiş olabilirsiniz. Bu hata sayfası aslında başka bir düzendir. Nuxt'un kendi hata düzeni vardır (burada kaynak kodu), ancak düzenlemek istiyorsanız, sadece bir error.vue düzeni oluşturun ve bunun yerine kullanılacaktır. Buradaki uyarı , hata düzeninin bir <nuxt /> öğesine sahip olmaması gerektiğidir . Ayrıca, görüntülenecek bazı temel bilgilerle bileşen üzerindeki bir error nesnesine de erişebileceksiniz. (İncelemek isterseniz, Nuxt çalıştıran terminalde bu yazdırılır.)

ara katman yazılımı

Ara yazılım, bir sayfa veya düzen oluşturmadan önce yürütülebilen işlevlerdir. Bunu yapmak isteyebileceğiniz çeşitli nedenler var. Rota koruma, geçerli bir oturum açma için Vuex mağazasını kontrol edebileceğiniz veya bazı parametreleri doğrulayabileceğiniz (bileşenin kendisinde validate yöntemini kullanmak yerine) popüler bir kullanımdır. Son zamanlarda üzerinde çalıştığım bir proje, rotaya ve parametrelere dayalı dinamik kırıntıları oluşturmak için ara yazılımı kullandı.

Bu işlevler asenkron olabilir; ara katman yazılımı çözülene kadar kullanıcıya hiçbir şey gösterilmeyeceğinden dikkatli olun. Ayrıca, daha sonra açıklayacağım Nuxt's Context'e erişimleri var.

Eklentiler

Bu dizin, uygulama oluşturulmadan önce Vue eklentilerini kaydetmenize olanak tanır. Bu, eklentinin Vue örneğinde uygulamanızın tamamında paylaşılmasına ve herhangi bir bileşenden erişilebilir olmasına olanak tanır.

Çoğu büyük eklentinin, belgelerini takip ederek Vue örneğine kolayca kaydedilebilen bir Nuxt sürümü vardır. Ancak, bir eklenti geliştireceğiniz veya mevcut bir eklentiyi bu amaç için uyarlamanız gerektiği durumlar olacaktır. Dokümanlardan ödünç aldığım bir örnek, bunun vue-notifications için nasıl yapılacağını gösteriyor. İlk önce paketi kurmamız gerekiyor:

 npm install vue-notifications --save

Ardından, eklentiler dizininde vue-notifications.js adlı bir dosya oluşturun ve aşağıdakileri ekleyin:

 import Vue from 'vue' import VueNotifications from 'vue-notifications' Vue.use(VueNotifications)

Normal bir Vue ortamında bir eklentiyi nasıl kaydedeceğinize çok benzer. Ardından proje nuxt.config.js dosyasını düzenleyin ve aşağıdaki girişi module.exports nesnesine ekleyin:

 plugins: ['~/plugins/vue-notifications']

Bu kadar. Artık uygulamanızın tamamında vue-notifications kullanabilirsiniz. Bunun bir örneği, örnek projede /plugin .

Böylece dizin yapısının bir özetini tamamlar. Öğrenecek çok şey gibi görünebilir, ancak bir Vue uygulaması geliştiriyorsanız, zaten aynı tür mantığı kuruyorsunuz. Nuxt, kurulumu soyutlamanıza ve inşa etmeye odaklanmanıza yardımcı olur.

Nuxt, geliştirmeye yardımcı olmaktan fazlasını yapıyor. Ekstra işlevsellik sağlayarak bileşenlerinizi güçlendirir .

Nuxt'un Süper Şarjlı Bileşenleri

Nuxt'u ilk araştırmaya başladığımda, Sayfa bileşenlerinin nasıl güçlendirildiğini okumaya devam ettim. Kulağa harika geliyordu, ancak bunun tam olarak ne anlama geldiği ve ne gibi faydalar sağladığı hemen belli değildi.

Bunun anlamı, tüm Sayfa bileşenlerinin, Nuxt'un ek işlevsellik sağlamak için kullanabileceği ek yöntemlere sahip olmasıdır. Aslında, paramları kontrol etmek ve geçersizlerse bir kullanıcıyı yeniden yönlendirmek için validate yöntemini kullandığımızda bunlardan birini daha önce görmüştük.

Bir Nuxt projesinde kullanılan iki ana yöntem, asyncData ve fetch yöntemleri olacaktır. Her ikisi de konsept olarak çok benzerdir, bileşen oluşturulmadan önce eşzamansız olarak çalıştırılırlar ve bir bileşenin ve mağazanın verilerini doldurmak için kullanılabilirler. Ayrıca, bir veritabanı veya API çağrısı için beklememiz gerekse bile, istemciye göndermeden önce sayfanın sunucuda tamamen oluşturulmasını sağlarlar.

asyncData ve fetch arasındaki fark nedir?

• asyncData , Sayfa bileşeninin verilerini doldurmak için kullanılır. Bir nesneyi döndürdüğünüzde, işlemeden önce data çıktısıyla birleştirilir.
• fetch , Vuex Mağazasını doldurmak için kullanılır. Bir söz verirseniz, Nuxt oluşturmadan önce çözülene kadar bekleyecektir.

Öyleyse bunları iyi kullanalım. Daha önce /products/view sayfasında, sahte API çağrımız yapılırken mağazanın ilk durumunun kısaca görüntülenmesiyle ilgili bir sorun yaşadığımızı hatırlıyor musunuz? Bunu düzeltmenin bir yolu, loading = true gibi bileşende veya Mağazada depolanan bir boole değerine sahip olmak ve ardından API çağrısı bittiğinde bir yükleme bileşenini görüntülemektir. Daha sonra, loading = false olarak ayarlar ve verileri görüntülerdik.

Bunun yerine, oluşturmadan önce Mağazayı doldurmak için fetch kullanalım. /products/view-async adlı yeni bir sayfada, created yöntemi fetch olarak değiştirelim; bu işe yaramalı, değil mi?

 export default { fetch () { // Unfortunately the below line throws an error // because 'this.$store' is undefined... this.$store.dispatch('product/load') }, computed: {...} }

İşin püf noktası şudur: Bu "süper şarjlı" yöntemler, bileşen oluşturulmadan önce çalışır, bu nedenle this , bileşene işaret etmez ve üzerindeki hiçbir şeye erişilemez. Peki buradaki Mağazaya nasıl erişeceğiz?

Bağlam API'si

Tabii ki, bir çözüm var. Nuxt'un tüm yöntemlerinde, Bağlam adı verilen son derece kullanışlı bir nesneyi içeren bir argüman (normalde ilki) sağlanır. Uygulama genelinde başvurmanız gereken her şey burada, yani Vue'nun önce bileşen üzerinde bu referansları oluşturmasını beklememize gerek yok.

Neyin mevcut olduğunu görmek için Bağlam belgelerine göz atmanızı şiddetle tavsiye ederim. Bazı kullanışlı olanlar, tüm eklentilerinize erişebileceğiniz app , rotaları değiştirmek için kullanılabilecek redirect , error sayfasını görüntülemek için hata ve route , query ve store gibi bazı açıklayıcılardır.

Böylece, Mağazaya erişmek için Bağlamı yok edebilir ve Mağazayı ondan çıkarabiliriz. Ayrıca Nuxt'un bileşeni oluşturmadan önce çözülmesini bekleyebilmesi için bir söz verdiğimizden emin olmamız gerekiyor, bu nedenle Mağaza eylemimizde de küçük bir ayarlama yapmamız gerekiyor.

 // Component export default { fetch ({ store }) { return store.dispatch('product/load') }, computed: {...} } // Store Action load ({ commit }) { return new Promise(resolve => { setTimeout(() => { commit('update', { _id: 1, title: 'Product', price: 99.99 }) resolve() }, 1000) }) }

Kodlama stilinize bağlı olarak async/await veya diğer yöntemleri kullanabilirsiniz, ancak konsept aynıdır; Nuxt'a, bileşeni oluşturmayı denemeden önce API çağrısının bitmesini ve Mağazanın sonuçla güncellenmesini sağlamasını söylüyoruz. /products/view-async denerseniz, ürünün ilk durumunda olduğu içeriğin flaşını görmezsiniz.

Bunun SSR olmadan bile herhangi bir Vue uygulamasında ne kadar yararlı olabileceğini hayal edebilirsiniz. Bağlam ayrıca tüm ara yazılımların yanı sıra Mağaza başlatılmadan önce çalışan özel bir mağaza eylemi olan NuxtServerInit gibi diğer Nuxt yöntemleri için de mevcuttur (bunun bir örneği sonraki bölümdedir)

SSR Kullanırken Dikkat Edilmesi Gerekenler

Nuxt gibi bir teknolojiyi diğer herhangi bir Vue projesi gibi ele alıp kullanmaya başlayan pek çok kişinin (kendim dahil), sonunda normalde işe yarayacağını bildiğimiz bir şeyin Nuxt'ta imkansız göründüğü bir duvara çarptığından eminim. Bu uyarıların birçoğu belgelendiğinden, üstesinden gelmek daha kolay olacaktır, ancak hata ayıklamaya başlarken dikkate alınması gereken ana şey, istemci ve sunucunun iki ayrı varlık olmasıdır.

İlk olarak bir sayfaya eriştiğinizde, Nuxt'a bir istek gönderilir, sunucu o sayfadan ve uygulamanın geri kalanından mümkün olduğunca fazlasını oluşturur ve ardından sunucu bunu size gönderir. Ardından, gezinmeye devam etme ve parçaları ihtiyaç duyduğu şekilde yükleme sorumluluğu müşteridedir.

Sunucunun önce mümkün olduğunca çok şey yapmasını istiyoruz, ancak bazen ihtiyaç duyduğu bilgilere erişimi olmuyor, bu da işin bunun yerine istemci tarafında yapılmasına neden oluyor. Daha da kötüsü, istemci tarafından sunulan nihai içerik sunucunun beklediğinden farklı olduğunda, müşteriye onu sıfırdan yeniden oluşturması söylenir. Bu, uygulama mantığında bir sorun olduğunun büyük bir göstergesidir. Neyse ki, bu olmaya başlarsa tarayıcınızın konsolunda (geliştirme modunda) bir hata oluşturulur.

Ortak bir sorun olan oturum yönetimi sorununun nasıl çözüleceğine dair bir örnek alalım. Bir hesaba giriş yapabileceğiniz bir Vue uygulamanız olduğunu ve oturumunuzun localStorage içinde tutmaya karar verdiğiniz bir belirteç (örneğin JWT) kullanılarak depolandığını hayal edin. Siteye ilk kez eriştiğinizde, bu belirteci, geçerliyse bazı temel kullanıcı bilgilerini döndüren ve bu bilgileri Mağaza'ya koyan bir API'ye karşı doğrulamak istersiniz.

Nuxt'un belgelerini okuduktan sonra, NuxtServerInit adlı kullanışlı bir yöntem olduğunu ve Mağaza'yı ilk yükte bir kez eşzamansız olarak doldurmanıza izin verdiğini görüyorsunuz. Kulağa mükemmel geliyor! Böylece, Mağaza'da kullanıcı modülünüzü yaratır ve Mağaza dizinindeki index.js dosyasına uygun eylemi eklersiniz:

 export const actions = { nuxtServerInit ({ dispatch }) { // localStorage should work, right? const token = localStorage.getItem('token') if (token) return dispatch('user/load', token) } }

Sayfayı yenilediğinizde hata alıyorsunuz, localStorage is not defined . Bunun nerede olduğunu düşünmek mantıklı geliyor. Bu yöntem sunucuda çalıştırılır, istemcide localStorage neyin depolandığı hakkında hiçbir fikri yoktur; aslında “localStorage”ın ne olduğunu bile bilmiyor! Yani bu bir seçenek değil.

Çözüm nedir? Aslında birkaç tane var. Bunun yerine istemcinin Mağazayı başlatmasını sağlayabilirsiniz, ancak müşteri tüm işi bitirdiği için SSR'nin avantajlarını kaybedersiniz. Sunucuda oturumlar ayarlayabilir ve ardından bunu kullanıcının kimliğini doğrulamak için kullanabilirsiniz, ancak bu, kurulması gereken başka bir katmandır. localStorage yöntemine en çok benzeyen şey, bunun yerine tanımlama bilgilerini kullanmaktır.

Nuxt, istemciden sunucuya istekle birlikte gönderildikleri için tanımlama bilgilerine erişebilir. Diğer Nuxt yöntemlerinde olduğu gibi, nuxtServerInit erişimi vardır, bu sefer ikinci argüman olarak, çünkü ilki mağaza için ayrılmıştır. Bağlamda, istemci isteğinden tüm başlıkları ve diğer bilgileri depolayan req nesnesine erişebiliriz. (Bu, özellikle Node.js kullandıysanız size tanıdık gelecektir.)

Bu nedenle, belirteci bir çerezde sakladıktan sonra (bu durumda “belirteç” olarak adlandırılır), ona sunucuda erişelim.

 import Cookie from 'cookie' export const actions = { nuxtServerInit ({ dispatch }, { req }) { const cookies = Cookie.parse(req.headers.cookie || '') const token = cookies['token'] || '' if (token) return dispatch('user/load', token) } }

Basit bir çözüm, ancak hemen belli olmayabilecek bir çözüm. Belirli eylemlerin (istemci, sunucu veya her ikisi) nerede gerçekleştiğini ve neye erişebileceklerini öğrenmek biraz zaman alır, ancak faydaları buna değer.

dağıtım

Nuxt ile kurulum son derece basittir. Aynı kod tabanını kullanarak bir SSR uygulaması, tek sayfalık uygulama veya statik sayfa oluşturabilirsiniz.

Sunucu Tarafı İşlenmiş Uygulama (SSR Uygulaması)

Nuxt'u kullanırken amaçladığınız şey muhtemelen buydu. Buradaki dağıtım için temel kavram, build sürecini seçtiğiniz herhangi bir platformda çalıştırmak ve birkaç yapılandırma ayarlamaktır. Dokümanlardan Heroku örneğini kullanacağım:

İlk olarak, package.json Heroku için komut dosyalarını ayarlayın:

 "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "heroku-postbuild": "npm run build" }

Ardından, heroku-cli kullanarak Heroku ortamını kurun (kurulum talimatları burada:

 # set Heroku variables heroku config:set NPM_CONFIG_PRODUCTION=false heroku config:set HOST=0.0.0.0 heroku config:set NODE_ENV=production # deploy git push heroku master

Bu kadar. Artık SSR Vue uygulamanız tüm dünyanın görmesi için yayında. Diğer platformların farklı kurulumları vardır, ancak süreç benzerdir. Şu anda listelenen resmi dağıtım yöntemleri şunlardır:

• Şimdi
• Dokku (Dijital Okyanus)
• Nginx

Tek Sayfalı Uygulama (SPA)

Nuxt'un sağladığı bazı ekstra özelliklerden yararlanmak, ancak sunucunun sayfaları oluşturmaya çalışmasını önlemek istiyorsanız, bunun yerine bir SPA olarak dağıtabilirsiniz.

İlk olarak, uygulamanızı SSR olmadan test etmek en iyisidir, çünkü varsayılan olarak npm run dev run, SSR ile çalışır. Bunu değiştirmek için nuxt.config.js dosyasını düzenleyin ve aşağıdaki seçeneği ekleyin:

 mode: 'spa',

Şimdi, npm run npm run dev , SSR kapatılacak ve uygulama test etmeniz için bir SPA olarak çalışacaktır. Bu ayar ayrıca gelecekteki hiçbir derlemenin SSR içermemesini sağlar.

Her şey yolunda görünüyorsa, dağıtım bir SSR uygulamasıyla tamamen aynıdır. Oluşturma sürecinin bir SPA istediğinizi bilmesini sağlamak için önce mode: 'spa' ayarlamanız gerektiğini unutmayın.

Statik Sayfalar

Bir sunucuyla hiç uğraşmak istemiyorsanız ve bunun yerine Surge veya Netlify gibi statik barındırma hizmetleriyle kullanılmak üzere sayfalar oluşturmak istiyorsanız, o zaman bu seçeneği seçmeniz gerekir. Yalnızca, bir sunucu olmadan Bağlamdaki req ve res erişemeyeceğinizi unutmayın, bu nedenle kodunuz buna dayanıyorsa, buna uyduğunuzdan emin olun. Örneğin, örnek projeyi oluştururken, nuxtServerInit işlevi, istek başlıklarındaki tanımlama bilgilerinden bir belirteç almaya çalıştığı için bir hata verir. Bu projede önemli değil, çünkü bu veriler hiçbir yerde kullanılmaz, ancak gerçek bir uygulamada bu verilere erişmenin alternatif bir yolu olması gerekir.

Bu sıralandıktan sonra dağıtım kolaydır. Muhtemelen önce değiştirmeniz gerekecek bir şey, bir seçenek eklemektir, böylece nuxt generate komutunun da bir geri dönüş dosyası oluşturması sağlanır. Bu dosya, barındırma hizmetinden, Nuxt'un barındırma hizmeti yerine yönlendirmeyi işlemesine izin vermesini ister ve bir 404 hatası verir. Bunu yapmak için nuxt.config.js aşağıdaki satırı ekleyin:

 generate: { fallback: true },

Şu anda Nuxt belgelerinde olmayan Netlify'ı kullanan bir örnek. netlify-cli ilk kez kullanıyorsanız, kimlik doğrulamanız isteneceğini unutmayın:

 # install netlify-cli globally npm install netlify-cli -g # generate the application (outputs to dist/ folder) npm run generate # deploy netlify deploy dist

Bu kadar basit! Makalenin başında belirtildiği gibi, burada bu projenin bir versiyonu var. Aşağıdaki hizmetler için resmi dağıtım belgeleri de vardır:

• Kabarmak
• GitHub Sayfaları

Daha fazla bilgi edin

Nuxt hızla güncelleniyor ve bu, sunduğu özelliklerin yalnızca küçük bir kısmı. Umarım bu makale sizi denemeye ve daha hızlı geliştirmenize ve güçlü özelliklerinden yararlanmanıza izin vererek Vue uygulamalarınızın yeteneklerini geliştirmeye yardımcı olup olmayacağını görmeye teşvik eder.

Daha fazla bilgi arıyorsanız, Nuxt'un resmi bağlantılarından başka bir yere bakmayın:

• belgeler
• Oyun alanı
• GitHub
• SSS

Looking to up your JavaScript game? Try reading The Comprehensive Guide to JavaScript Design Patterns by fellow Toptaler Marko Mišura.