Aracılığıyla paylaş

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

  • Makale

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ştirmesini destekler:

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

Ö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'u yükleyin.

    İş 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.

  • 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ı gerekir.

    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).

Node.js kullanarak Vue.js projesi oluşturma

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, hızlı bir şekilde yapı iskelesi projeleri 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 adresini 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'u seçin. Başlangıç penceresi açık değilse Dosya>Başlangıç Penceresi'ni seçin. Web uygulaması yazın, dil olarak C# öğesini seçin, ardından Çekirdek Boş'u ASP.NET ve ardından İleri'yi seçin. Sonraki ekranda projeyi client-app olarak adlandırın ve İleri'yi seçin.

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

    ASP.NET Core Web Uygulaması proje şablonunu görmüyorsanız, ASP.NET ve web geliştirme iş yükünü ve 'yi yüklemeniz gerekir.İlk olarak NET Core geliştirme iş yükü. İş yüklerini yüklemek için, Yeni Proje iletişim kutusunun sol bölmesindeki Visual Studio Yükleyicisi Aç bağlantısına tıklayın (Yeni Proje Dosyala'ya>>tıklayın). 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 veya npm install -g @vue/cli sürüm 3.0 (şu anda beta sürümündedir) yazınnpm install --g vue-cli.

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

  1. Komut isteminize gidin ve geçerli dizini proje kök klasörünüzle değiştirin.

  2. Ek soruları yanıtlamanız istendiğinde adımları yazın vue init webpack client-app ve izleyin.

    Not

    .vue dosyalarında, dönüştürmeyi yapmak için bir yükleyici ile Webpack veya benzer bir çerçeve kullanmanız gerekir. TypeScript ve Visual Studio ,vue dosyalarının nasıl derleneceklerini bilmiyor. Aynı durum paketleme için de geçerlidir; TypeScript, import ES2015 modüllerini (yani ve export deyimlerini) tarayıcıda yüklemek üzere tek bir son .js dosyasına nasıl dönüştüreceklerini bilmez. Webpack burada en iyi seçenektir. 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ştirmesi için ASP.NET şablonu yoktur.

Webpack yapılandırmasını, derlenmiş dosyaların wwwroot'a çıkışını oluşturacak şekilde değiştirin

  • ./client-app/config/index.js dosyasını açın ve ve build.assetsRoot değerini wwwroot yolu olarak değiştirinbuild.index:

    // 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

  1. Visual Studio'da Proje>Özellikleri>Derleme Olayları'na gidin.

  2. Derleme öncesi olay komut satırına yazınnpm --prefix ./client-app run build.

Webpack'in çıkış modülü adlarını yapılandırma

  • ./client-app/build/webpack.base.conf.js dosyası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.

  1. Komut isteminize gidin ve geçerli dizini proje kök klasörü olarak değiştirin.

  2. yazın vue create client-appve ardından Özellikleri el ile seçin'i seçin.

  3. Typescript'i seçin ve ardından diğer istenen seçenekleri belirleyin.

  4. Kalan adımları izleyin ve sorulara yanıt verin.

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

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

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

  2. Ardından ,/client-app/ içinde 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.

vue-cli 3.0 ile derleme

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 komutunu npm run build ç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, Özellikler'i seç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ırlamalar

  • 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;
}

  • Komutu npm run build proje özelliklerinde derleme öncesi olay olarak çalıştırmak vue-cli 3.0 kullanılırken çalışmaz.

İlgili içerik