Windows'da Nuxt.js kullanmaya başlama

Nuxt.js web çerçevesini yüklemenize ve Windows'da çalışmaya başlamanıza yardımcı olacak bir kılavuz.

Nuxt.js, Vue.js, Node.js, Webpack ve Babel.jstabanlı sunucu tarafından işlenmiş JavaScript uygulamaları oluşturmaya yönelik bir çerçevedir. Next.js'den ilham alındı. Temelde Vue için bir proje şablonudur. Next.jsgibi, en iyi yöntemlere dikkat ederek oluşturulur ve neredeyse hiç yapılandırma olmadan basit, tutarlı bir şekilde "evrensel" web uygulamaları oluşturmanıza olanak tanır. Bu "evrensel" sunucu tarafından işlenen web uygulamaları bazen "izomorfik" olarak da adlandırılır, yani kod istemci ile sunucu arasında paylaşılır.

Vue hakkında daha fazla bilgi edinmek için Vue'ya genel bakış sayfasına bakın.

Önkoşullar

Bu kılavuzda, aşağıdakiler dahil olmak üzere Node.js geliştirme ortamınızı ayarlama adımlarını tamamladığınız varsayılır:

• Linux dağıtımı (Ubuntu gibi) dahil olmak üzere Linux için Windows Alt Sistemi (WSL)yükleyin ve WSL 2 modunda çalıştığından emin olun. PowerShell'i açıp şunu girerek bunu deleyebilirsiniz: wsl -l -v
• WSL 2'ye Node.js yükleme: Bu sürüm yöneticisi, paket yöneticisi, Visual Studio Code ve Uzaktan Geliştirme uzantısını içerir.

Daha iyi performans hızı, sistem çağrısı uyumluluğu ve Linux sunucuları veya Docker kapsayıcıları çalıştırırken parodi için NodeJS uygulamalarıyla çalışırken Linux için Windows Alt Sistemi'ni kullanmanızı öneririz.

Önemli

WSL ile Linux dağıtımı yüklemek, dosyaları depolamak için bir dizin oluşturur: \\wsl\Ubuntu-20.04 (kullandığınız Linux dağıtımıyla Ubuntu-20.04'ü kullanın). Bu dizini Windows Dosya Gezgini'nde açmak için WSL komut satırınızı açın, cd ~kullanarak giriş dizininizi seçin, ardından komutunu girin explorer.exe . NodeJS'yi yüklememeye veya bağlı C sürücüsünde (/mnt/c/Users/yourname$) üzerinde çalışacağınız dosyaları depolamamaya dikkat edin. Bunun yapılması yükleme ve derleme sürelerinizi önemli ölçüde yavaşlatır.

Nuxt.js yükleme

Nuxt.jsyüklemek için, yüklemek istediğiniz tümleşik sunucu tarafı çerçevesi, UI çerçevesi, test çerçevesi, mod, modüller ve linter ile ilgili bir dizi soruyu yanıtlamanız gerekir:

1. WSL komut satırını açın (örneğin, Ubuntu).

2. Yeni bir proje klasörü oluşturun: mkdir NuxtProjects ve şu dizini girin: cd NuxtProjects.

3. Nuxt.js yükleyin ve bir proje oluşturun ('my-nuxt-app' yerine uygulamanızı çağırmak istediğiniz öğeyi yazın): npm create nuxt-app my-nuxt-app

4. Nuxt.js yükleyicisi şimdi size aşağıdaki soruları sorar:

   • Proje Adı: my-nuxtjs-app
   • Proje açıklaması: Nuxt.js uygulamamın açıklaması.
   • Yazar adı: GitHub takma adımı kullanıyorum.
   • Paket yöneticisini seçin: Yarn veya Npm - örneklerimiz için NPM kullanıyoruz.
   • UI çerçevesini seçin: Hiçbiri, Ant Design Vue, Bootstrap Vue ve benzeri. Şimdi bu örnek için Vuetify'ı seçelim, ancak Vue Topluluğu projenize en uygun olanı seçmenize yardımcı olmak için bu kullanıcı arabirimi çerçevelerini karşılaştıran güzel bir özet oluşturdu.
   • Özel sunucu çerçeveleri seçin: Hiçbiri, AdonisJs, Express, Fastify vb. Bu örnek için Yok'u seçelim, ancak Dev.to sitesinde 2019-2020 sunucu çerçevesi karşılaştırması bulabilirsiniz.
   • Nuxt.js modüllerini seçin (modülleri seçmek için boşluk tuşunu veya istemiyorsanız enter tuşunu kullanın): Axios (HTTP isteklerini basitleştirmek için) ya da PWA desteği (bir servis çalışanı, manifest.json dosyası, vb. eklemek için). Bu örnek için bir modül eklemeyelim.
   • Lint araçlarını seçin: ESLint, Prettier, Lint aşamalı dosyaları. Şimdi ESLint'i (kodunuzu analiz etmek ve olası hatalar konusunda sizi uyarmak için bir araç) seçelim.
   • Bir test çerçevesi seçin: Yok, Jest, AVA. Çünkü bu hızlı başlangıçta testi ele almayacağız, Yok'i seçelim.
   • İşleme modunu seçin: Evrensel (SSR) veya Tek Sayfalı Uygulama (SPA). Örneğimiz için Evrensel (SSR) seçelim, ancak Nuxt.js belgeleri bazı farklılıklara işaret : SSR'nin uygulamanızı ve SPA'yı statik barındırma için sunucu işlemek için çalışan bir Node.js sunucusu gerektirmesi.
   • Geliştirme araçlarını seçin: jsconfig.json (Intellisense kod tamamlamanın çalışması için VS Code önerilir)

5. Projeniz oluşturulduktan sonra, Nuxt.js proje dizininizi girmek cd my-nuxtjs-app ve ardından projeyi VS Code WSL-Remote ortamında açmak için code . girin.

   

6. Nuxt.js yüklendikten sonra bilmeniz gereken 3 komut vardır:

   • Yeniden yükleme, dosya izleme ve görevlerin tekrar çalıştırılması gibi özelliklerle bir geliştirme ortamı örneğini çalıştırmak için npm run dev.
   • Projenizi derlemek için npm run build.
   • Uygulamanızı üretim modunda başlatmak için npm start.

   VS Code'da tümleşik WSL terminalini açın (View > Terminal). Terminal yolunun proje dizininize (~/NuxtProjects/my-nuxt-app$) işaretlendiğinden emin olun. Ardından aşağıdakini kullanarak yeni Nuxt.js uygulamanızın geliştirme örneğini çalıştırmayı deneyin: npm run dev

7. Yerel geliştirme sunucusu başlatılacak (istemci ve sunucu derlemeleri için havalı bir ilerleme çubuğu görüntülenecek). Projenizin oluşturulması tamamlandıktan sonra terminaliniz "Başarıyla derlendi" ifadesini ve derlemenin ne kadar zaman aldığını gösterir. Yeni Nuxt.js uygulamanızı açmak için http://localhost:3000 web tarayıcınızı işaret edin.

   

8. pages/index.vue dosyasını VS Code düzenleyicinizde açın. <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> sayfa başlığını bulun ve <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>olarak değiştirin. Web tarayıcınız hala localhost:3000'de açıkken, değişikliğinizi kaydedin ve sık erişimli yeniden yükleme özelliğinin tarayıcıda otomatik olarak derlenip güncelleştirileceğini fark edin.

9. şimdi Nuxt.js hataları nasıl işlediğini görelim. Başlık kodunuzun şu şekilde görünmesi için </v-card-title> kapanış etiketini kaldırın: <v-card-title class="headline">This is my new Nuxt.js app!. Bu değişikliği kaydedin ve tarayıcınız ile terminalinizde, eksik bir <v-card-title> kapatma etiketi olduğunu ve hatanın kodunuzda bulunabileceği satır numaralarını belirten bir derleme hatasının görüntüleneceğini fark edin. </v-card-title> kapanış etiketini değiştirin, kaydedin; sayfa yeniden yüklenir.

VS Code'un hata ayıklayıcısını Nuxt.js uygulamanızla, F5 tuşuna basarak veya menü çubuğundaki Görünüm > Hata Ayıklama (Ctrl+Shift+D) ve Görünüm > Hata Ayıklama Konsolu (Ctrl+Shift+Y) seçeneklerini kullanarak çalıştırabilirsiniz. Hata ayıklama penceresinde dişli simgesini seçerseniz, hata ayıklama kurulum ayrıntılarını kaydetmeniz için bir başlatma yapılandırması (launch.json) dosyası oluşturulur. Daha fazla bilgi edinmek için bkz. VS Code Debug Etme.

Nuxt.jshakkında daha fazla bilgi edinmek için Nuxt.js kılavuzuna bakın.