Önceki

Sonraki

Vue CLI kullanarak uygulama oluşturma

Tamamlandı

Kurgusal şirketimiz Relecloud için birinin aya yolculuk rezervasyonu için bir uygulama oluşturmak istiyoruz. Uygulamamızı önyüklemek için Vue CLI kullanacağız.

Vue CLI'yi yükleme

Vue CLI, Node.js'nin kullandığı paketleme aracı npm aracılığıyla kullanılabilir. Node.js yüklediğinizde npm aracı otomatik olarak yüklenir. Sisteminizde npm ve Node.js yüklü olduğundan emin olmak için bir komut veya terminal penceresi açın ve aşağıdaki komutları çalıştırın:

node -v
npm -v

Önemli

Vue CLI genellikle npm aracılığıyla genel olarak yüklenir ve node.js dosyasını doğrudan yüklediyseniz yükseltilmiş izinler gerektirir. Node Version Manager 'ı (nvm) kullanmak, yüklemeyi normal bir kullanıcı olarak gerçekleştirmenizi sağlar. Linux, Linux için Windows Alt Sistemi (WSL) veya macOS üzerine nvm yükleyebilir veya Windows'a nvm-windows yükleyebilirsiniz.

Vue CLI'yı yüklemek için bir komut veya terminal penceresi açın ve aşağıdaki komutu çalıştırın:

npm install -g @vue/cli

Vue CLI'nın sisteminize yüklenmesi birkaç dakika sürer.

Uygulamayı önyükleme

Vue uygulamasını önyüklemenin en hızlı yolu Vue CLI'dır. Şimdi Vue CLI kullanarak bir başlangıç uygulaması oluşturacağız.

1. Komut veya terminal penceresinde, uygulamanızı depolamak istediğiniz klasöre gidin.

2. Aşağıdaki komutu çalıştırarak bir Vue uygulaması oluşturun:

   vue create relecloud
   

3. İstendiğinde, ok tuşlarını kullanarak Özellikleri el ile seç'e gidin ve enter tuşunu seçin.

   

4. Projeniz için gereken özellikler istendiğinde ok tuşlarını kullanarak Babel'e gidin ve ara çubuğunu seçerek devre dışı bırakın. Ardından ok tuşlarını kullanarak Linter / Biçimlendirici'ye gidin ve ara çubuğunu seçerek devre dışı bırakın.

   

5. Özellik seçimini onaylamak için Enter tuşunu seçin.

   Dekont

   Üretim projeleri için daha fazla özellik eklemeye karar vekleyebilirsiniz. Bu özellikler bu modülün kapsamı dışındadır.

6. Vue.js sürümünü seçmeniz istendiğinde ok tuşlarını kullanarak 3.x'e gidin ve Enter tuşunu seçin.

   

7. Yapılandırma dosyalarını yerleştirmeyi tercih ettiğiniz yeri seçmeniz istendiğinde, Varsayılan Ayrılmış yapılandırma dosyalarında seçeneğini belirleyin ve Enter tuşunu seçin.

   

8. Bu bilgileri önceden ayarlanmış olarak kaydetmeniz istendiğinde, varsayılan Hayır değerini kabul etmek için Enter tuşunu seçin.

Projeniz şimdi oluşturulur ve gerekli kitaplıklar yüklenir. İşlem birkaç dakika sürer.

Kodu keşfetme

Şimdi Vue CLI'nın oluşturduğu kodu keşfedelim.

1. Yükleme tamamlandığında, dizinleri relecloud olarak değiştirin ve aşağıdaki komutları çalıştırarak Visual Studio Code'da açın:

   cd relecloud
   code .
   

2. Visual Studio Code'da package.json dosyasını açın.

3. vue bağımlılık olarak listelenir ve @vue/cli-service olarak devDependencylistelenir.

   Dekont

   Bölümü @vue/cli-service , uygulamanızı oluşturmak ve geliştirme sunucusunu çalıştırmakla sorumludur.

4. İki betike dikkat edin:

   • Betik serve geliştirme sunucusunu başlatır.
   • Projenizi build yayımlamaya hazır olduğunuzda betik JavaScript, HTML veya CSS oluşturur.

5. Vue uygulamasını barındıracak public/index.html açın.

6. src/main.js dosyasını açın ve App.vue dosyasından içeri aktarılan App kodu not edin.

7. Sonraki ünitede keşfedeceğimiz temel bileşeni içeren src/App.vue dosyasını açın.

   Dekont

   Visual Studio Code sizden önerilen bir uzantı isteyebilir. Uzantıyı sonraki bir modülde yükleyeceğiz.

8. Tüm bileşenlerin depolanacağı src/components klasörüne dikkat edin.

Geliştirme sunucusunu çalıştırma

Geliştirme sunucusunu başlatalım ve varsayılan sayfaya bakalım.

1. Visual Studio Code'da Terminal>Yeni Terminal'i seçerek yeni bir terminal penceresi açın.

2. Tümleşik terminalde, geliştirme sunucusunu başlatmak için aşağıdaki komutu çalıştırın:

   npm run serve
   

3. Tarayıcınızı açın ve http://localhost:8080 konumuna gidin.

   Varsayılan Vue uygulaması görüntülenir.

   

Tebrikler! Şimdi Vue CLI kullanarak bir Vue uygulaması oluşturdunuz.

Devam et