Visual Studio için Node.js Araçları'nı kullanarak Vue.js uygulaması oluşturma

2025-01-27

Visual Studio, JavaScript veya TypeScript'te Vue.js çerçevesiyle uygulama geliştirmeyi destekler.

Aşağıdaki yeni özellikler Visual Studio'da Vue.js uygulama geliştirmeyi destekler:

.vue dosyalarında Betik, Stil ve Şablon blokları desteği
.vue dosyalarında lang özniteliğinin tanınması
Proje ve dosya şablonları Vue.js

Önkoşullar

Visual Studio 2017 sürüm 15.8 veya sonraki bir sürümün yüklü olması ve Node.js geliştirme iş yükünün yüklü olması gerekir.

Önemli

Bu makale, yalnızca Visual Studio 2017 sürüm 15.8'den itibaren kullanılabilen özellikler gerektirir.

Gerekli bir sürüm henüz yüklü değilse visual studio 2019 yükleyin.

İş yükünü yüklemeniz gerekiyorsa ancak Visual Studio zaten yüklüyse, Visual Studio Yükleyicisi'ni açacak olan Araçlar>Araçlar ve Özellikler'i Al...seçeneğine gidin. Node.js geliştirme iş yükünü seçin ve ardından Değiştirseçeneğini seçin.
ASP.NET Core projesini oluşturmak için ASP.NET ve web geliştirme ile .NET Core platformlar arası geliştirme iş yüklerinin yüklü olması gerekir.
Node.js çalışma zamanının yüklü olması gerekiyor.

Yüklü değilse Node.js web sitesinden LTS sürümünü yükleyin. Genel olarak, Visual Studio yüklü Node.js çalışma zamanını otomatik olarak algılar. Yüklü bir çalışma zamanı algılamıyorsa, 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 ve Özellikler) öğesini seçin.

Node.js kullanarak Vue.js projesi oluştur

Yeni bir proje oluşturmak için yeni Vue.js şablonlarını kullanabilirsiniz. Şablonun kullanımı, kullanmaya başlamanın en kolay yoludur. Ayrıntılı adımlar için bkz. Visual Studio'yu kullanarak ilk Vue.js uygulamanızıoluşturma.

ASP.NET Core ve Vue CLI ile Vue.js projesi oluşturma

Vue.js, projeleri hızlı bir şekilde yapılandırmak için resmi bir CLI sağlar. Uygulamanızı oluşturmak için CLI kullanmak istiyorsanız, geliştirme ortamınızı ayarlamak için bu makaledeki adımları izleyin.

Önemli

Bu adımlarda, Vue.js çerçevesiyle ilgili bir deneyime sahip olduğunuz varsayılır. Aksi takdirde çerçeve hakkında daha fazla bilgi edinmek için lütfen Vue.js ziyaret edin.

Yeni ASP.NET Core projesi oluşturma

Bu örnekte boş bir ASP.NET Çekirdek Uygulaması (C#) kullanırsınız. Ancak, çeşitli projeler ve programlama dilleri arasından seçim yapabilirsiniz.

Boş proje oluşturma

Visual Studio'yu açın ve yeni bir proje oluşturun.

Visual Studio 2019'da başlangıç penceresinde Yeni proje oluştur seçin. Başlangıç penceresi açık değilse Dosya >Başlangıç Penceresiseçin. web uygulaması yazın, dil olarak C# seçin, ardından ASP.NET Core Boşseçin ve ardından İleriseçin. Sonraki ekranda, projeye client-appadını verin ve ardından İleriseçin.

Önerilen hedef çerçeveyi veya .NET 6'yı seçin ve ardından oluştur'useçin.

ASP.NET Core Web Uygulaması proje şablonunu görmüyorsanız, ASP.NET ve web geliştirme iş yükünü ve öğesini yüklemeniz gerekir. önce NET Coregeliştirme iş yükünü. İş yüklerini yüklemek için, Yeni Proje iletişim kutusunun sol bölmesindeki Visual Studio Yükleyicisini Aç bağlantısına tıklayın (Dosya>Yeni>Proje'yi seçin). Visual Studio Yükleyicisi başlatılır. Gerekli iş yüklerini seçin.

Proje başlangıç dosyasını yapılandırma

./Startup.cs dosyasını açın ve Yapılandır yöntemine aşağıdaki satırları ekleyin:

app.UseDefaultFiles(); // Enables default file mapping on the web root.
app.UseStaticFiles(); // Marks files on the web root as servable.

Vue CLI'yi yükleme

Vue-cli npm modülünü yüklemek için bir komut istemi açın ve sürüm 3.0 (şu anda beta sürümünde) için npm install --g vue-cli veya npm install -g @vue/cli yazın.

Vue CLI kullanarak yeni bir istemci uygulamasının iskelesini oluşturma

Komut isteminize gidin ve geçerli dizini proje kök klasörünüzle değiştirin.
vue init webpack client-app yazın ve ek soruları yanıtlamanız istendiğinde adımları izleyin.

Not

.vue dosyaları için, dönüştürmeyi yapmak üzere bir yükleyici ile webpack veya benzer bir çerçeveyi kullanmanız gerekir. TypeScript ve Visual Studio .vue dosyalarının nasıl derleneceklerini bilmez. Aynı durum paketleme için de geçerlidir; TypeScript, ES2015 modüllerini (import ve export deyimleri) tarayıcıda yüklenecek tek bir son .js dosyasına nasıl dönüştüreceklerini bilmez. Burada en iyi seçenek webpack'tir. MSBuild kullanarak bu işlemi Visual Studio'dan yönlendirmek için bir Visual Studio şablonundan başlamanız gerekir. Şu anda, kutuda Vue.js geliştirme için ASP.NET şablonu yoktur.

Derlenmiş dosyaların wwwroot'a çıkışı için webpack yapılandırmasını değiştirme

./client-app/config/index.jsdosyasını açın ve build.index ve build.assetsRoot wwwroot yolu olarak değiştirin:

// Template for index.html
index: path.resolve(__dirname, '../../wwwroot/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../../wwwroot'),

Bir derleme her tetiklendiğinde istemci uygulamasını derlemek için projeyi belirtin

Visual Studio'da Project>Özellikleri>Derleme Olaylarıgidin.
Derleme öncesi olay komut satırına,npm --prefix ./client-app run buildyazın.

Web paketinin çıkış modülü adlarını yapılandırma

./client-app/build/webpack.base.conf.jsdosyasını açın ve output özelliğine aşağıdaki özellikleri ekleyin:

devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'

Vue CLI ile TypeScript desteği ekleme

Bu adımlar, şu anda beta sürümünde olan vue-cli 3.0 sürümünü gerektirir.

Komut isteminize gidin ve geçerli dizini proje kök klasörü olarak değiştirin.
vue create client-appyazın ve ardından özellikleri el ile seçin'i seçin.
TypeScriptseçin ve ardından diğer istenen seçenekleri belirleyin.
Kalan adımları izleyin ve sorulara yanıt verin.

TypeScript için Vue.js projesi yapılandırma

./client-app/tsconfig.json dosyasını açın ve derleyici seçeneklerine noEmit:true ekleyin.

Bu seçeneği ayarlayarak, Visual Studio'da her derlemenizde projenizi karmaşık hale getirmekten kaçınırsınız.

Ardından ./client-app/ bir vue.config.js dosyası oluşturun ve aşağıdaki kodu ekleyin.

module.exports = {
    outputDir: '../wwwroot',

    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: '[absolute-resource-path]',
            devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
        }
    }
};

Yukarıdaki kod webpack'i yapılandırıp wwwroot klasörünü ayarlar.

Derlemek için vue-cli 3.0 kullanın

Vue-cli 3.0 ile ilgili bilinmeyen bir sorun derleme işleminin otomatikleştirilmesini engelleyebilir. wwwroot klasörünü yenilemeyi her denediğinizde, client-app klasöründe npm run build komutunu çalıştırmanız gerekir.

Alternatif olarak, ASP.NET proje özelliklerini kullanarak vue-cli 3.0 projesini derleme öncesi olay olarak oluşturabilirsiniz. Projeye sağ tıklayın, Özelliklerseçin ve Derleme sekmesindeki Derleme öncesi olay komut satırı metin kutusuna aşağıdaki komutları ekleyin.

cd ./client-app
npm run build
cd ../

Sınırlama

lang özniteliği yalnızca JavaScript ve TypeScript dillerini destekler. Kabul edilen değerler şunlardır: js, jsx, ts ve tsx.
lang özniteliği şablon veya stil etiketleriyle çalışmaz.
.vue dosyalarındaki betik bloklarında hata ayıklama, önceden işlenmiş yapısı nedeniyle desteklenmez.
TypeScript .vue dosyalarını modül olarak tanımaz. TypeScript'e .vue dosyalarının nasıl göründüğünü bildirmek için aşağıdaki gibi kod içeren bir dosyaya ihtiyacınız vardır (vue-cli 3.0 şablonu bu dosyayı zaten içerir).
```
// ./client-app/vue-shims.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}
```
Proje özelliklerinde önceden derleme olayı olarak npm run build komutu çalıştırıldığında vue-cli 3.0 kullanılırken çalışmaz.

Vue kullanmaya başlama kılavuzu.
Vue CLI projesi.
Webpack yapılandırma belgeleri .