Öğretici: Visual Studio'da Vue ile ASP.NET Core uygulaması oluşturma

Makale
02/14/2024

Bu makalede, API arka ucu olarak hareket etmek için bir ASP.NET Core projesi ve kullanıcı arabirimi olarak davranacak bir Vue projesi oluşturmayı öğreneceksiniz.

Visual Studio, Angular, React ve Vue'yu destekleyen ASP.NET Temel Tek Sayfalı Uygulama (SPA) şablonları içerir. Şablonlar, ASP.NET Core projelerinizde her çerçevenin temel dosyalarını ve klasörlerini içeren yerleşik bir İstemci Uygulaması klasörü sağlar.

Aşağıdaki ASP.NET Temel Tek Sayfalı Uygulamalar oluşturmak için bu makalede açıklanan yöntemi kullanabilirsiniz:

İstemci uygulamasını ASP.NET Core projesinin dışında ayrı bir projeye yerleştirme
Bilgisayarınızda yüklü çerçeve CLI'sini temel alarak istemci projesini oluşturma

Not

Bu makalede, Vite CLI kullanan Visual Studio 2022 sürüm 17.8'de güncelleştirilmiş şablonun kullanıldığı proje oluşturma işlemi açıklanmaktadır.

Önkoşullar

Aşağıdakileri yüklediğinizden emin olun:

ASP.NET ve web geliştirme iş yükü yüklü visual studio 2022 sürüm 17.8 veya üzeri. Ücretsiz yüklemek için Visual Studio indirmeleri sayfasına gidin. İş yükünü yüklemeniz gerekiyorsa ve zaten Visual Studio'nuz varsa Araçlar>Araçları ve Özellikleri Al...'e gidin ve bu da Visual Studio Yükleyicisi açar. ASP.NET ve web geliştirme iş yükünü ve ardından Değiştir'i seçin.
Node.js ile birlikte gelen npm (https://www.npmjs.com/ ).

Ön uç uygulamasını oluşturma

Başlangıç penceresinde (açmak için Dosya>Başlangıç Penceresi'ni seçin), Yeni proje oluştur'u seçin.
Üstteki arama çubuğunda Vue'yi arayın ve ardından Seçili dil olarak JavaScript veya TypeScript ile Vue ve ASP.NET Core (Önizleme) seçeneğini belirleyin.
Projeyi VueWithASP olarak adlandırın ve oluştur'u seçin.

Çözüm Gezgini aşağıdaki proje bilgilerini gösterir:

Tek başına Vue şablonuyla karşılaştırıldığında, ASP.NET Core ile tümleştirme için bazı yeni ve değiştirilmiş dosyalar görürsünüz:
- vite.config.json (değiştirildi)
- HelloWorld.vue (değiştirildi)
- package.json (değiştirildi)

Proje özelliklerini ayarlama

Çözüm Gezgini VueWithASP.Server'a sağ tıklayın ve Özellikler'i seçin.
Özellikler sayfasında Hata Ayıkla sekmesini açın ve Hata ayıklama başlatma profilleri kullanıcı arabirimini aç seçeneğini belirleyin. ASP.NET Core projesinden (veya varsa https) sonra adlandırılan profil için Tarayıcıyı Başlat seçeneğinin işaretini kaldırın.

Bu değer, kaynak hava durumu verileriyle web sayfasının açılmasını engeller.

Not

Visual Studio'da launch.json, Başlat düğmesiyle ilişkilendirilmiş başlangıç ayarlarını Hata Ayıklama araç çubuğunda depolar. Şu anda launch.json .vscode klasörünün altında bulunmalıdır.

Projeyi başlatma

Uygulamayı başlatmak için F5 tuşuna basın veya pencerenin üst kısmındaki Başlangıç düğmesini seçin. İki komut istemi görüntülenir:

çalışan ASP.NET Core API projesi
Gibi bir ileti gösteren Vite CLI VITE v4.4.9 ready in 780 ms

Not

İletiler için konsol çıkışını denetleyin. Örneğin, Node.js güncelleştirilecek bir ileti olabilir.

Vue uygulaması görünür ve API aracılığıyla doldurulur. Uygulamayı görmüyorsanız bkz . Sorun giderme.

Projeyi yayımlama

Visual Studio 2022 sürüm 17.3'den başlayarak, Visual Studio Yayımlama aracını kullanarak tümleşik çözümü yayımlayabilirsiniz.

Not

Yayımlama özelliğini kullanmak için Visual Studio 2022 sürüm 17.3 veya üzerini kullanarak JavaScript projenizi oluşturun.

Çözüm Gezgini VueWithASP.Server projesine sağ tıklayın ve Proje Başvurusu Ekle'yi>seçin.

vuewithasp.client projesinin seçili olduğundan emin olun.
Tamam'ı seçin.
ASP.NET Core projesine yeniden sağ tıklayın ve Proje Dosyasını Düzenle'yi seçin.

Bu işlem , projenin .csproj dosyasını açar.
.csproj dosyasında, proje başvurusunun değerine ayarlanmış falsebir <ReferenceOutputAssembly> öğe içerdiğinden emin olun.

Bu başvuru aşağıdaki gibi görünmelidir.
```
 <ProjectReference Include="..\vuewithasp.client\vuewithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>
```
ASP.NET Core projesine sağ tıklayın ve bu seçenek varsa Projeyi Yeniden Yükle'yi seçin.

Program.cs aşağıdaki kodun mevcut olduğundan emin olun.

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

Yayımlamak için ASP.NET Core projesine sağ tıklayın, Yayımla'yı seçin ve azure gibi istediğiniz yayımlama senaryosuyla eşleşecek seçenekleri belirtin( örneğin, bir klasörde yayımla vb.).

Yayımlama işlemi yalnızca bir ASP.NET Core projesi için olduğundan daha fazla zaman alır çünkü npm run build yayımlama sırasında komut çağrılır. BuildCommand varsayılan olarak çalışırnpm run build.

Sorun giderme

Ara sunucu hatası

Aşağıdaki hatayı görebilirsiniz:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5173 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Bu sorunu görürseniz, büyük olasılıkla ön uç arka uçtan önce başladı. Arka uç komut isteminin çalışır durumda olduğunu gördüğünüzde, tarayıcıda Vue uygulamasını yenilemeniz gerekir.

Aksi takdirde, bağlantı noktası kullanımdaysa başlatma Ayarlar.json ve vite.config.js bağlantı noktası numarasını 1artırmayı deneyin.

Gizlilik hatası

Aşağıdaki sertifika hatasını görebilirsiniz:

Your connection isn't private

Vue sertifikalarını %appdata%\local\asp.net\https veya %appdata%\roaming\asp.net\https konumundan silmeyi deneyin ve sonra yeniden deneyin.

Bağlantı noktalarını doğrulama

Hava durumu verileri doğru yüklenmiyorsa bağlantı noktalarınızın doğru olduğunu da doğrulamanız gerekebilir.

Bağlantı noktası numaralarının eşleştiğinden emin olun. ASP.NET Core projenizde (Özellikler klasöründe) launch Ayarlar.json dosyasına gidin. Özelliğinden applicationUrl bağlantı noktası numarasını alın.

Birden çok applicationUrl özellik varsa uç nokta kullanan bir https özellik arayın. gibi https://localhost:7142görünmelidir.
Ardından Vue projeniz için vite.config.js dosyasına gidin. target özelliğini başlatma Ayarlar.json özelliğiyle applicationUrleşleşecek şekilde güncelleştirin. Güncelleştirdiğinizde, bu değer şuna benzer görünmelidir:
```
target: 'https://localhost:7142/',
```

Vue'nun eski sürümü

Projeyi oluştururken 'C:\Users\Me\source\repos\vueprojectname\package.json' dosyası bulunamadı konsol iletisini görürseniz, Vite CLI sürümünüzü güncelleştirmeniz gerekebilir. Vite CLI'yi güncelleştirdikten sonra, C:\Users\[profilename] içindeki .vuerc dosyasını da silmeniz gerekebilir.

Docker

Web API'sini oluştururken Docker desteğini etkinleştirirseniz arka uç Docker profilini kullanmaya başlayabilir ve yapılandırılan 5173 numaralı bağlantı noktasını dinlemeyebilir. Bunu çözmek için:

Başlatmada Docker profilini düzenleyin Ayarlar.json aşağıdaki özellikleri ekleyin:

"httpPort": 5175, 
"sslPort": 5173

Alternatif olarak, aşağıdaki yöntemi kullanarak sıfırlayın:

Çözüm özelliklerinde arka uç uygulamanızı başlangıç projesi olarak ayarlayın.
Hata Ayıkla menüsünde, Başlangıç düğmesi açılan menüsünü kullanarak profili arka uç uygulamanızın profiline değiştirin.
Ardından, Çözüm özelliklerinde birden çok başlangıç projesine sıfırlayın.

Sonraki adımlar

ASP.NET Core'daki SPA uygulamaları hakkında daha fazla bilgi için bkz . Tek Sayfalı Uygulamalar Geliştirme. Bağlantılı makale, aspnetcore-https.js gibi proje dosyaları için ek bağlam sağlar, ancak proje şablonları ile Vue.js çerçevesi ve diğer çerçeveler arasındaki farklar nedeniyle uygulamanın ayrıntıları farklıdır. Örneğin, ClientApp klasörü yerine Vue dosyaları ayrı bir projede yer alır.

İstemci projesine özgü MSBuild bilgileri için bkz . JSPS için MSBuild özellikleri.

Aracılığıyla paylaş