Hızlı Başlangıç: visual studio kullanarak ilk Vue.js uygulamanızı oluşturma

Visual Studio tümleşik geliştirme ortamına (IDE) bu 5-10 dakikalık girişte basit bir Vue.js web uygulaması oluşturacak ve çalıştıracaksınız.

Önkoşullar

• Visual Studio'yu ve Node.js geliştirme iş yükünü yüklemiş olmanız gerekir.

  Visual Studio 2019'u henüz yüklemediyseniz, ücretsiz yüklemek için Visual Studio indirmeleri sayfasına gidin.

  İş yükünü yüklemeniz gerekiyorsa ancak Visual Studio'nuz zaten varsa Araçlar>Araçları ve Özellikleri Al...'e gidin ve bu da Visual Studio Yükleyicisi açar. Node.js geliştirme iş yükünü ve ardından Değiştir'i seçin.

  

• Node.js çalışma zamanının yüklü olması gerekir.

  Yüklü değilse, dış çerçeveler ve kitaplıklarla en iyi uyumluluk için Node.js web sitesinden LTS sürümünü yüklemenizi öneririz. Node.js, 32 bit ve 64 bit mimariler için tasarlanmıştır. Node.js iş yüküne dahil olan Visual Studio'daki Node.js araçları her iki sürümü de destekler. Yalnızca bir tane gereklidir ve Node.js yükleyicisi aynı anda yalnızca birinin yüklenmesini destekler.

  Genel olarak, Visual Studio yüklü Node.js çalışma zamanını otomatik olarak algılar. Yüklü bir çalışma zamanını algılamazsa, projenizi özellikler sayfasında yüklü çalışma zamanına başvuracak şekilde yapılandırabilirsiniz (proje oluşturduktan sonra proje düğümüne sağ tıklayın, Özellikler'i seçin ve Node.exe yolunu ayarlayın). Node.js'nin genel yüklemesini kullanabilir veya Node.js projelerinizin her birinde yerel yorumlayıcının yolunu belirtebilirsiniz.

Bir proje oluştur

İlk olarak bir Vue.js web uygulaması projesi oluşturacaksınız.

1. Node.js çalışma zamanı zaten yüklü değilse Node.js web sitesinden LTS sürümünü yükleyin.

   Daha fazla bilgi için önkoşullara bakın.

2. Visual Studio'yu açın.

3. Yeni bir proje oluşturma.

   Başlangıç penceresini kapatmak için Esc tuşuna basın. Arama kutusunu açmak için Ctrl + Q yazın, Temel Vue.js yazın, ardından Temel Vue.js Web uygulaması (JavaScript veya TypeScript) öğesini seçin. Görüntülenen iletişim kutusuna basic-vuejs adını yazın ve Oluştur'u seçin.

   

   Temel Vue.js Web uygulaması proje şablonunu görmüyorsanız Node.js geliştirme iş yükünü eklemeniz gerekir. Ayrıntılı yönergeler için bkz . Önkoşullar.

   Visual Studio yeni projeyi oluşturur. Yeni proje Çözüm Gezgini (sağ bölme) açılır.

4. Uygulama için gereken npm paketlerini yükleme işleminin ilerleme durumu için Çıkış penceresini (alt bölme) denetleyin.

5. Çözüm Gezgini npm düğümünü açın ve listelenen tüm npm paketlerinin yüklü olduğundan emin olun.

   Eksik paketler varsa (ünlem işareti simgesi), npm düğümüne sağ tıklayıp Eksik npm Paketlerini Yükle'yi seçebilirsiniz.

IDE'yi keşfedin

1. Sağ bölmedeki Çözüm Gezgini göz atın.

   

   • Yeni Proje iletişim kutusunda belirttiğiniz adı kullanarak projeniz kalın olarak vurgulanır. Diskte, bu proje bir ile temsil edilir.proje klasörünüzdeki njsproj dosyası.

   • En üst düzeyde, varsayılan olarak projenizle aynı ada sahip olan bir çözüm bulunur. bir ile temsil edilen bir çözüm.diskteki sln dosyası, bir veya daha fazla ilgili proje için bir kapsayıcıdır.

   • npm düğümü yüklü npm paketlerini gösterir. bir iletişim kutusu kullanarak npm paketlerini aramak ve yüklemek için npm düğümüne sağ tıklayabilirsiniz.

2. Npm paketlerini yüklemek veya komut isteminden Node.js komutlarını çalıştırmak istiyorsanız, proje düğümüne sağ tıklayın ve Komut İstemini Burada Aç'ı seçin.

Projeye .vue dosyası ekleme

1. Çözüm Gezgini,src/components klasörü gibi herhangi bir klasöre sağ tıklayın ve ardından Yeni Öğe Ekle'yi>seçin.

   Tüm öğe şablonlarını görmüyorsanız, Tüm Şablonları Göster'i ve ardından öğe şablonunu seçin.

2. JavaScript Vue Tek Dosya Bileşeni veya TypeScript Vue Tek Dosya Bileşeni'ni seçin ve ekle'ye tıklayın.

   Visual Studio yeni dosyayı projeye ekler.

Projeyi derleme

1. Ardından, projeyi oluşturmak için Derleme>Çözümü Oluştur'u seçin.

2. Derleme sonuçlarını görmek için Çıkış penceresini işaretleyin ve Çıkışı göster listesinden Oluştur'u seçin.

JavaScript Vue.js proje şablonu (ve TypeScript şablonunun eski sürümleri) derleme sonrası olayı yapılandırarak npm betiğini kullanır build . Bu ayarı değiştirmek istiyorsanız, Windows Gezgini'nden proje dosyasını (<projectname.njsproj>) açın ve şu kod satırını bulun:

<PostBuildEvent>npm run build</PostBuildEvent>

Uygulamayı çalıştırma

1. Uygulamayı çalıştırmak için Ctrl+F5 (veya Hata Ayıklama Olmadan Başlat'ta Hata Ayıkla>) tuşlarına basın.

   Konsolunda Geliştirme Sunucusu Başlatılıyor iletisini görürsünüz.

   Ardından uygulama bir tarayıcıda açılır.

   Çalışan uygulamayı görmüyorsanız sayfayı yenileyin.

   

2. Web tarayıcısını kapatın.

Bu Hızlı Başlangıcı tamamladığınızdan dolayı tebrikler! Visual Studio IDE'yi Vue.js ile kullanma hakkında biraz bilgi edinmiş olduğunuzu umuyoruz. Özelliklerine daha ayrıntılı bir şekilde göz atmak isterseniz, içindekiler tablosunun Öğreticiler bölümünde yer alan bir öğreticiyle devam edin.

Sonraki adımlar

Vue.js uygulaması oluşturma

Uygulamayı Linux App Service'e dağıtma