ASP.NET Core için araç Blazor

  1. Visual Studio 2022'nin en son sürümünü ASP.NET web geliştirme iş yüküyle yükleyin.

  2. Yeni bir proje oluşturma.

  3. Deneyim Blazor WebAssembly için Uygulama Blazor WebAssembly şablonunu seçin. Deneyim Blazor Server için Uygulama Blazor Server şablonunu seçin. İleri’yi seçin.

  4. Bir Project adı girin ve Konum'ın doğru olduğunu onaylayın. İleri’yi seçin.

  5. Ek bilgiler iletişim kutusunda, barındırılan ASP.NET Core için barındırılan uygulama onay kutusunu Blazor WebAssembly seçin. Oluştur’u seçin.

    İki barındırma modeli (tek Blazor başına ve Blazor WebAssembly barındırılan) ve hakkında bilgi için Blazor Server bkz. ASP.NET Core Blazor barındırma modelleri .

  6. Uygulamayı çalıştırmak için Ctrl + F5'e basın.

    Barındırılan bir çözümü Blazor WebAssembly Visual Studio çözümün başlangıç projesi Server projedir.

HTTPS geliştirme sertifikasına güvenme hakkında ASP.NET Core için bkz. ASP.NET Core 'de HTTPS 'yi zorla .

Barındırılan bir uygulamayı Blazor WebAssembly yürütürken, çözümün projesinde uygulamayı Server çalıştırın.

  1. .NET Core SDK'nin en son sürümünü yükleyin. SDK'yı daha önce yüklemiş olduysanız, bir komut kabuğunda aşağıdaki komutu yürüterek yüklü sürümü tespit edebilirsiniz:

    dotnet --version
    
  2. en son sürümünü Visual Studio Code.

  3. uzantısı için en son C# Visual Studio Code yükleyin.

  4. Bir deneyim Blazor WebAssembly için komut kabuğunda aşağıdaki komutu yürütün:

    dotnet new blazorwasm -o WebApplication1
    

    Barındırılan bir Blazor WebAssembly deneyim için komuta barındırılan seçenek ( veya ) seçeneğini -ho --hosted ekleyin:

    dotnet new blazorwasm -o WebApplication1 -ho
    

    Bir deneyim Blazor Server için komut kabuğunda aşağıdaki komutu yürütün:

    dotnet new blazorserver -o WebApplication1
    

    İki barındırma modeli (tek Blazor başına ve Blazor WebAssembly barındırılan) ve hakkında bilgi için Blazor Server bkz. ASP.NET Core Blazor barındırma modelleri .

  5. klasörü WebApplication1 Visual Studio Code.

  6. IDE, projeyi derlemek ve hata ayıklamak için varlık eklemenizi talep ediyor. Evet’i seçin.

    Bu Visual Studio Code varlıkların otomatik olarak oluşturularak oluşturulamaysa aşağıdaki dosyaları kullanın:

    .vscode/launch.json (bir uygulamanın başlatılması ve hata ayıklaması için Blazor WebAssembly yapılandırılır):

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "blazorwasm",
          "name": "Launch and Debug Blazor WebAssembly Application",
          "request": "launch",
          "cwd": "${workspaceFolder}",
          "browser": "edge"
        }
      ]
    }
    

    .vscode/tasks.json:

    {
      "version": "2.0.0",
      "tasks": [
        {
          "label": "build",
          "command": "dotnet",
          "type": "shell",
          "args": [
            "build",
            "/property:GenerateFullPaths=true",
            "/consoleloggerparameters:NoSummary",
           ],
           "group": "build",
           "presentation": {
              "reveal": "silent"
           },
           "problemMatcher": "$msCompile"
        }
      ]
    }
    

    Projenin Properties/launchSettings.json dosyası, dosyanın inspectUri bölümündeki profiller için hata ayıklama proxy'si profiles özelliğini içerir:

    "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
    

    Barındırılan Blazor WebAssembly başlatma ve görev yapılandırması

    Barındırılan çözümler için ve dosyalarını içeren klasörü, tipik proje klasörlerini içeren klasör olan çözümün üst klasörüne Blazor WebAssembly ekleyin (veya taşıyın): , .vscode ve launch.json tasks.json Client Server Shared . ve dosyalarında yapılandırmasını güncelleştirin veya launch.json tasks.json projeden barındırılan bir Blazor WebAssembly uygulama Server yürütün.

    Dosyayı Properties/launchSettings.json inceleme ve özelliğinden uygulamanın applicationUrl URL'sini belirleme (örneğin, https://localhost:7268 ). Dosyada kullanmak için bu değeri launch.json unutmayın.

    Dosyanın başlatma .vscode/launch.json yapılandırmasında:

    • Geçerli çalışma dizinini ( cwd ) proje Server klasörüne ayarlayın.
    • özelliğiyle uygulamanın URL'sini url belirtin. Dosyadan daha önce kaydedilen değeri Properties/launchSettings.json kullanın.
    "cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
    "url": "{URL}"
    

    Yukarıdaki yapılandırmada:

    • Yer {SERVER APP FOLDER} tutucu, Server projenin klasörüdür( genellikle Server ).
    • Yer {URL} tutucu, uygulamanın ÖZELLIĞInde uygulamanın dosyasında belirtilen Properties/launchSettings.json URL'dir. applicationUrl

    Yeni Microsoft Edge kullanılıyorsa ve Google Chrome sistemde yüklü değilse, yapılandırmaya ek bir "browser": "edge" özelliği ekleyin.

    Aşağıdaki örnek .vscode/launch.json dosya:

    • Geçerli çalışma dizinini klasörüne Server ayarlar.
    • Uygulamanın URL'sini olarak https://localhost:7268 ayarlar.
    • Varsayılan tarayıcı olan Google Chrome'un varsayılan tarayıcısını tarayıcı olarak Microsoft Edge.
    "cwd": "${workspaceFolder}/Server",
    "url": "https://localhost:7268",
    "browser": "edge"
    

    Tam .vscode/launch.json dosya:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "blazorwasm",
          "name": "Launch and Debug Blazor WebAssembly Application",
          "request": "launch",
          "cwd": "${workspaceFolder}/Server",
          "url": "https://localhost:7268",
          "browser": "edge"
        }
      ]
    }
    

    içinde, .vscode/tasks.json build uygulamanın proje dosyasının yolunu belirten Server bir bağımsız değişken ekleyin:

    "${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
    

    Yukarıdaki bağımsız değişkende:

    • Yer {SERVER APP FOLDER} tutucu, Server projenin klasörüdür( genellikle Server ).
    • Yer tutucu, genellikle çözümün adına ve ardından proje şablonundan oluşturulan bir uygulamaya göre {PROJECT NAME} .Server uygulamanın Blazor WebAssembly adıdır.

    Çözümün .vscode/tasks.json klasöründe Server adlı bir projeye sahip BlazorHosted örnek Server dosya:

    {
      "version": "2.0.0",
      "tasks": [
        {
          "label": "build",
          "command": "dotnet",
          "type": "process",
            "args": [
              "build",
              "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
              "/property:GenerateFullPaths=true",
              "/consoleloggerparameters:NoSummary",
            ],
            "group": "build",
            "presentation": {
              "reveal": "silent"
            },
            "problemMatcher": "$msCompile"
        }
      ]
    }
    
  7. Uygulamayı çalıştırmak için Ctrl + F5'e basın.

Not

Şu anda yalnızca tarayıcıda hata ayıklama de destekleni.

Hata ayıklama sırasında, örneğin uygulamayı ile çalıştırarak barındırılan bir çözümün arka uç uygulamasını Server Blazor WebAssembly otomatik olarak yeniden oluşturamayabilirsiniz. dotnet watch run

Geliştirme sertifikasına güvenme

Linux'ta bir sertifikaya güvenmenin merkezi bir yolu yoktur. Genellikle aşağıdaki yaklaşımlardan biri benimsenmiş olur:

  • Tarayıcının dışlama listesinde uygulamanın URL'sini hariç tut.
  • için tüm otomatik olarak imzalanan sertifikalara localhost güvenin.
  • Sertifikayı tarayıcıda güvenilen sertifikalar listesine ekleyin.

Daha fazla bilgi için tarayıcı üreticiniz ve Linux dağıtımı tarafından sağlanan kılavuza bakın.

  1. yükleme Mac için Visual Studio.

  2. Dosya Yeni > Çözüm'e tıklayın veya Başlangıç Penceresinden yeni bir proje oluşturun.

  3. Kenar çubuğu içinde Web ve Konsol Uygulaması'nu > seçin.

    Deneyim Blazor WebAssembly için Uygulama Blazor WebAssembly şablonunu seçin. Deneyim Blazor Server için Uygulama Blazor Server şablonunu seçin. İleri’yi seçin.

    İki barındırma modeli (tek Blazor başına ve Blazor WebAssembly barındırılan) ve hakkında bilgi için Blazor Server bkz. ASP.NET Core Blazor barındırma modelleri .

  4. Kimlik Doğrulaması'nın Kimlik Doğrulaması Yok olarak ayar olduğunu onaylayın. İleri’yi seçin.

  5. Barındırılan bir Blazor WebAssembly deneyim için Barındırılan ASP.NET Core onay kutusunu seçin.

  6. Uygulama Project alanına adını WebApplication1 girin. Oluştur’u seçin.

  7. Uygulamayı hata > ayıklayıcısı olmadan çalıştırmak için Hata Ayıklama Olmadan Başlat'ı seçin. Uygulamayı hata ayıklayıcısıyla çalıştırmak için Çalıştır Hata Ayıklamayı > Başlat veya Çalıştır (▶) düğmesiyle uygulamayı çalıştırın.

Geliştirme sertifikasına güvenen bir istem görünürse sertifikaya güvenin ve devam eder. Sertifikaya güvenmesi için kullanıcı ve anahtarlık parolaları gereklidir. HTTPS geliştirme sertifikasına güvenme hakkında ASP.NET Core için bkz. ASP.NET Core 'de HTTPS 'yi zorla .

Barındırılan bir uygulamayı Blazor WebAssembly yürütürken, çözümün projesinde uygulamayı Server çalıştırın.

Platformlar Visual Studio Code geliştirme için Visual Studio Code'i Blazor kullanma

Visual Studio Code, uygulama geliştirmek için kullanılan açık kaynak, platformlar arası bir Tümleşik Geliştirme Ortamıdır Blazor (IDE). .NET CLI'sini kullanarak uygulama geliştirme Blazor için yeni bir uygulama Visual Studio Code. Daha fazla bilgi için bu makalenin Linux sürümüne bakın.

Blazor şablon seçenekleri

Çerçeve, Blazor iki barındırma modeli için yeni uygulamalar oluşturmak için şablonlar Blazor sağlar. Şablonlar, geliştirme için (Visual Studio, Mac için Visual Studio, Visual Studio Code veya .NET CLI) araç seçiminiz ne olursa olsun yeni projeler Blazor ve çözümler oluşturmak için Blazor kullanılır:

  • Blazor Server proje şablonu: blazorserver
  • Blazor WebAssembly proje şablonu: blazorwasm

barındırma modelleri hakkında Blazor daha fazla bilgi için bkz. ASP.NET Core Blazor barındırma modelleri . Proje şablonları hakkında daha Blazor fazla bilgi için bkz. BlazorASP.NET Core proje yapısı .

Şablon seçenekleri hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:

  • .NET Core belgelerinde dotnet yeni makalesi için .NET varsayılan şablonları:
  • Komut kabuğunda CLI komutuna yardım seçeneğini ( -h --help veya ) dotnet new geçirme:
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

Ek kaynaklar

  1. Visual Studio 2022'nin en son sürümünü ASP.NET web geliştirme iş yüküyle yükleyin.

  2. Yeni bir proje oluşturma.

  3. Deneyim Blazor WebAssembly için Uygulama Blazor WebAssembly şablonunu seçin. Deneyim Blazor Server için Uygulama Blazor Server şablonunu seçin. İleri’yi seçin.

  4. Bir Project adı girin ve Konum'ın doğru olduğunu onaylayın. İleri’yi seçin.

  5. Ek bilgiler iletişim kutusunda, barındırılan ASP.NET Core için barındırılan uygulama onay kutusunu Blazor WebAssembly seçin. Oluştur’u seçin.

    İki barındırma modeli Blazor (tek başına ve Blazor WebAssembly barındırılan) ve hakkında bilgi için Blazor Server bkz. ASP.NET Core Blazor barındırma modelleri .

  6. Uygulamayı çalıştırmak için Ctrl + F5 tuşlarına basın.

    Barındırılan bir çözümü Blazor WebAssembly Visual Studio çözümün başlangıç projesi Server projedir.

HTTPS geliştirme sertifikasına güvenerek ASP.NET Core için bkz. ASP.NET Core 'de HTTPS 'yi zorla .

Barındırılan bir uygulamayı Blazor WebAssembly yürütürken çözümün projesinde uygulamayı Server çalıştırın.

  1. .NET Core SDK'nin en son sürümünü yükleyin. SDK'yı daha önce yüklemiş olduysanız, bir komut kabuğunda aşağıdaki komutu yürüterek yüklü sürümü tespit edebilirsiniz:

    dotnet --version
    
  2. Visual Studio Code'nin en son sürümünü yükleyin.

  3. uzantısı için en son C# Visual Studio Code yükleyin.

  4. Bir deneyim Blazor WebAssembly için komut kabuğunda aşağıdaki komutu yürütün:

    dotnet new blazorwasm -o WebApplication1
    

    Barındırılan bir Blazor WebAssembly deneyim için komuta barındırılan seçeneği ( veya ) seçeneğini -ho --hosted ekleyin:

    dotnet new blazorwasm -o WebApplication1 -ho
    

    Bir deneyim Blazor Server için komut kabuğunda aşağıdaki komutu yürütün:

    dotnet new blazorserver -o WebApplication1
    

    İki barındırma modeli Blazor (tek başına ve Blazor WebAssembly barındırılan) ve hakkında bilgi için Blazor Server bkz. ASP.NET Core Blazor barındırma modelleri .

  5. klasörü WebApplication1 Visual Studio Code.

  6. IDE, projeyi derlemek ve hata ayıklamak için varlıklar eklemenizi talep ediyor. Evet’i seçin.

    Bu Visual Studio Code varlıkların otomatik olarak oluşturularak oluşturulamaysa aşağıdaki dosyaları kullanın:

    .vscode/launch.json (bir uygulamanın başlatılması ve hata ayıklaması için Blazor WebAssembly yapılandırılır):

    {
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "type": "blazorwasm",
                "name": "Launch and Debug Blazor WebAssembly Application",
                "request": "launch",
                "cwd": "${workspaceFolder}",
                "browser": "edge"
            }
        ]
    }
    

    .vscode/tasks.json:

    {
        // See https://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "2.0.0",
        "tasks": [
            {
                "label": "build",
                "command": "dotnet",
                "type": "shell",
                "args": [
                    "build",
                    // Ask dotnet build to generate full paths for file names.
                    "/property:GenerateFullPaths=true",
                    // Do not generate summary otherwise it leads to duplicate errors in Problems panel
                    "/consoleloggerparameters:NoSummary",
                ],
                "group": "build",
                "presentation": {
                    "reveal": "silent"
                },
                "problemMatcher": "$msCompile"
            }
        ]
    }
    

    Barındırılan Blazor WebAssembly başlatma ve görev yapılandırması

    Barındırılan çözümler için ve dosyalarını içeren klasörü, tipik proje klasörlerini içeren klasör olan çözümün üst klasörüne ekleyin Blazor WebAssembly (veya .vscode launch.json tasks.json taşıyın): Client , ve Server Shared . ve dosyalarında yapılandırmasını güncelleştirin veya launch.json tasks.json projeden barındırılan bir Blazor WebAssembly uygulama Server yürütün.

    .vscode/launch.json ( launch yapılandırma):

    ...
    "cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
    ...
    

    Geçerli çalışma dizininin önceki yapılandırmasında ( cwd ), yer tutucu projenin {SERVER APP FOLDER} Server klasörüdür, genellikle " Server ".

    Yeni Microsoft Edge kullanılıyorsa ve Google Chrome sistemde yüklü değilse, yapılandırmaya ek bir "browser": "edge" özelliği ekleyin.

    Varsayılan tarayıcı Google Chrome yerine hata Microsoft Edge tarayıcı olarak çalıştıran ve proje klasörü Server için örnek:

    ...
    "cwd": "${workspaceFolder}/Server",
    "browser": "edge"
    ...
    

    .vscode/tasks.json( dotnet komut bağımsız değişkenleri):

    ...
    "${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
    ...
    

    Yukarıdaki bağımsız değişkende:

    • Yer {SERVER APP FOLDER} tutucu projenin Server klasörüdür, genellikle " Server ".
    • Yer tutucu, genellikle proje şablonundan oluşturulan bir uygulamada çözümün adına göre uygulamanın adıdır ve ardından {PROJECT NAME} .Server " " Blazor gelir.

    Uygulama ile kullanma öğreticisinde yer alan SignalR aşağıdaki Blazor WebAssembly örnek, proje klasörü adını ve proje adını Server BlazorWebAssemblySignalRApp.Server kullanır:

    ...
    "args": [
      "build",
        "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
        ...
    ],
    ...
    
  7. Uygulamayı çalıştırmak için Ctrl + F5 tuşlarına basın.

Geliştirme sertifikasına güvenme

Linux'ta bir sertifikaya güvenmenin merkezi bir yolu yoktur. Genellikle, aşağıdaki yaklaşımlardan biri benimsenmiş olur:

  • Tarayıcının dışlama listesinde uygulamanın URL'sini hariç tut.
  • için tüm otomatik olarak imzalanan sertifikalara localhost güvenin.
  • Sertifikayı tarayıcıda güvenilen sertifikalar listesine ekleyin.

Daha fazla bilgi için tarayıcı üreticiniz ve Linux dağıtımı tarafından sağlanan kılavuza bakın.

  1. yükleme Mac için Visual Studio.

  2. Dosya Yeni > Çözüm'e tıklayın veya Başlangıç Penceresinden yeni bir proje oluşturun.

  3. Kenar çubuğu içinde Web ve Konsol Uygulaması'nu > seçin.

    Deneyim Blazor WebAssembly için Uygulama Blazor WebAssembly şablonunu seçin. Deneyim Blazor Server için Uygulama Blazor Server şablonunu seçin. İleri’yi seçin.

    İki barındırma modeli Blazor (tek başına ve Blazor WebAssembly barındırılan) ve hakkında bilgi için Blazor Server bkz. ASP.NET Core Blazor barındırma modelleri .

  4. Kimlik Doğrulaması'nın Kimlik Doğrulaması Yok olarak ayar olduğunu onaylayın. İleri’yi seçin.

  5. Barındırılan bir Blazor WebAssembly deneyim için Barındırılan ASP.NET Core onay kutusunu seçin.

  6. Uygulama Project alanına adını WebApplication1 girin. Oluştur’u seçin.

  7. Uygulamayı hata > ayıklayıcısı olmadan çalıştırmak için Hata Ayıklama Olmadan Başlat'ı seçin. Uygulamayı hata ayıklayıcısıyla çalıştırmak için Çalıştır Hata Ayıklamayı > Başlat veya Çalıştır (▶) düğmesiyle uygulamayı çalıştırın.

Geliştirme sertifikasına güvenen bir istem görünürse sertifikaya güvenin ve devam eder. Sertifikaya güvenmesi için kullanıcı ve anahtarlık parolaları gereklidir. HTTPS geliştirme sertifikasına güvenerek ASP.NET Core için bkz. ASP.NET Core 'de HTTPS 'yi zorla .

Barındırılan bir uygulamayı Blazor WebAssembly yürütürken çözümün projesinde uygulamayı Server çalıştırın.

Platformlar Visual Studio Code geliştirme için Visual Studio Code'i Blazor kullanma

Visual Studio Code geliştirmek için kullanılmaktadır açık kaynak, platformlar arası Tümleşik Geliştirme Ortamıdır Blazor (IDE). .NET CLI'sini kullanarak yeni bir uygulama Blazor oluşturmak için Visual Studio Code. Daha fazla bilgi için bu makalenin Linux sürümüne bakın.

Blazor şablon seçenekleri

Çerçeve, Blazor iki barındırma modeli için yeni uygulamalar oluşturmak için şablonlar Blazor sağlar. Şablonlar, geliştirme için (Visual Studio, Mac için Visual Studio, Visual Studio Code veya .NET CLI) araç seçiminiz ne olursa olsun yeni projeler ve çözümler oluşturmak Blazor Blazor için kullanılır:

  • Blazor WebAssembly proje şablonu: blazorwasm
  • Blazor Server proje şablonu: blazorserver

barındırma modelleri hakkında Blazor daha fazla bilgi için bkz. ASP.NET Core Blazor barındırma modelleri . Proje şablonları hakkında daha Blazor fazla bilgi için bkz. BlazorASP.NET Core proje yapısı .

Şablon seçenekleri, yardım seçeneğini ( veya ) komut -h --help kabuğunda dotnet new CLI komutuna iletir:

dotnet new blazorwasm -h
dotnet new blazorserver -h

Ek kaynaklar

  1. ASP.NET ve web geliştirme iş yüküyle Visual Studio 2022'nin en son sürümünü yükleyin.

  2. Yeni bir proje oluşturma.

  3. Deneyim Blazor WebAssembly için Uygulama Blazor WebAssembly şablonunu seçin. Deneyim Blazor Server için Uygulama Blazor Server şablonunu seçin. İleri’yi seçin.

  4. Bir Project adı girin ve Konum'ın doğru olduğunu onaylayın. İleri’yi seçin.

  5. Ek bilgiler iletişim kutusunda, barındırılan ASP.NET Core için barındırılan uygulama onay kutusunu Blazor WebAssembly seçin. Oluştur’u seçin.

    İki barındırma modeli Blazor (tek başına ve Blazor WebAssembly barındırılan) ve hakkında bilgi için Blazor Server bkz. ASP.NET Core Blazor barındırma modelleri .

  6. Uygulamayı çalıştırmak için Ctrl + F5 tuşlarına basın.

    Barındırılan bir çözümü Blazor WebAssembly Visual Studio çözümün başlangıç projesi Server projedir.

HTTPS geliştirme sertifikasına güvenerek ASP.NET Core için bkz. ASP.NET Core 'de HTTPS 'yi zorla .

Barındırılan bir uygulamayı Blazor WebAssembly yürütürken çözümün projesinde uygulamayı Server çalıştırın.

  1. .NET Core SDK'nin en son sürümünü yükleyin. SDK'yı daha önce yüklemiş olduysanız, bir komut kabuğunda aşağıdaki komutu yürüterek yüklü sürümü tespit edebilirsiniz:

    dotnet --version
    
  2. Visual Studio Code'nin en son sürümünü yükleyin.

  3. uzantısı için en son C# Visual Studio Code yükleyin.

  4. Bir deneyim Blazor WebAssembly için komut kabuğunda aşağıdaki komutu yürütün:

    dotnet new blazorwasm -o WebApplication1
    

    Barındırılan bir Blazor WebAssembly deneyim için komuta barındırılan seçeneği ( veya ) seçeneğini -ho --hosted ekleyin:

    dotnet new blazorwasm -o WebApplication1 -ho
    

    Bir deneyim Blazor Server için komut kabuğunda aşağıdaki komutu yürütün:

    dotnet new blazorserver -o WebApplication1
    

    İki barındırma modeli Blazor (tek başına ve Blazor WebAssembly barındırılan) ve hakkında bilgi için Blazor Server bkz. ASP.NET Core Blazor barındırma modelleri .

  5. klasörü WebApplication1 Visual Studio Code.

  6. IDE, projeyi derlemek ve hata ayıklamak için varlıklar eklemenizi talep ediyor. Evet’i seçin.

    Visual Studio Code varlıkları otomatik olarak oluşturmayı sunmazsa aşağıdaki dosyaları kullanın:

    .vscode/launch.json (bir uygulamanın başlatılması ve hata ayıklaması için yapılandırılır Blazor WebAssembly ):

    {
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "type": "blazorwasm",
                "name": "Launch and Debug Blazor WebAssembly Application",
                "request": "launch",
                "cwd": "${workspaceFolder}",
                "browser": "edge"
            }
        ]
    }
    

    .vscode/tasks.json:

    {
        // See https://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "2.0.0",
        "tasks": [
            {
                "label": "build",
                "command": "dotnet",
                "type": "shell",
                "args": [
                    "build",
                    // Ask dotnet build to generate full paths for file names.
                    "/property:GenerateFullPaths=true",
                    // Do not generate summary otherwise it leads to duplicate errors in Problems panel
                    "/consoleloggerparameters:NoSummary",
                ],
                "group": "build",
                "presentation": {
                    "reveal": "silent"
                },
                "problemMatcher": "$msCompile"
            }
        ]
    }
    

    Barındırılan Blazor WebAssembly başlatma ve görev yapılandırması

    Barındırılan çözümler için, Blazor WebAssembly .vscode launch.json ve tasks.json dosyalarını ve dosyaları, tipik proje klasörlerini içeren klasör olan ' nin üst klasörüne ekleyin (veya taşıyın): Client , Server ve Shared . launch.jsonVe tasks.json dosyalarındaki yapılandırmanın projeden barındırılan bir uygulama yürütmesini güncelleştirin veya onaylayın Blazor WebAssembly Server .

    .vscode/launch.json ( launch yapılandırma):

    ...
    "cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
    ...
    

    Geçerli çalışma dizini () için önceki yapılandırmada, cwd {SERVER APP FOLDER} yer tutucu Server projenin klasörüdür, genellikle " Server " olur.

    Microsoft Edge kullanılıyorsa ve Google Chrome sistemde yüklü değilse, yapılandırmaya ek bir özelliği ekleyin "browser": "edge" .

    Servervarsayılan tarayıcı Google Chrome yerine hata ayıklama çalıştırmaları tarayıcısı olarak Microsoft Edge bir proje klasörü örneği.

    ...
    "cwd": "${workspaceFolder}/Server",
    "browser": "edge"
    ...
    

    .vscode/tasks.json( dotnet komut bağımsız değişkenleri):

    ...
    "${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
    ...
    

    Yukarıdaki bağımsız değişkende:

    • {SERVER APP FOLDER}Yer tutucu, Server projenin klasörüdür, genellikle "" olur Server .
    • {PROJECT NAME}Yer tutucu, genellikle çözümün adını temel alan uygulamanın adı ve .Server Blazor Proje şablonundanoluşturulan bir uygulamada "" gelir.

    SignalR Bir Blazor WebAssembly uygulamayla birlikte kullanmak için öğreticideki aşağıdaki örnek bir proje klasörü adı Server ve proje adı kullanır BlazorWebAssemblySignalRApp.Server :

    ...
    "args": [
      "build",
        "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
        ...
    ],
    ...
    
  7. + Uygulamayı çalıştırmak için CTRLF5 tuşuna basın.

Geliştirme sertifikasına güven

Linux 'ta sertifikaya güvenmenin merkezi bir yolu yoktur. Genellikle aşağıdaki yaklaşımlardan biri benimsenmiştir:

  • Uygulamanın URL 'sini tarayıcının dışlama listesinde hariç tutun.
  • İçin otomatik olarak imzalanan tüm sertifikalara güvenin localhost .
  • Sertifikayı tarayıcıdaki güvenilen sertifikalar listesine ekleyin.

Daha fazla bilgi için, tarayıcı üreticiniz ve Linux dağıtım tarafından sunulan kılavuza bakın.

  1. Mac için Visual Studio'i yükler.

  2. Dosya > yeni çözüm ' ı seçin veya Başlangıç penceresinden Yeni bir proje oluşturun.

  3. Yan çubukta Web ve konsol > uygulaması' nı seçin.

    Bir Blazor WebAssembly deneyim için Blazor WebAssembly uygulama şablonunu seçin. Bir Blazor Server deneyim için Blazor Server uygulama şablonunu seçin. İleri’yi seçin.

    İki barındırma modeli hakkında daha fazla bilgi için Blazor Blazor WebAssembly (tek başına ve barındırılan) ve Blazor Server bkz ASP.NET Core Blazor barındırma modelleri ..

  4. Kimlik doğrulamasının kimlik doğrulaması yok olarak ayarlandığını onaylayın. İleri’yi seçin.

  5. barındırılan bir Blazor WebAssembly deneyim için ASP.NET Core barındırılan onay kutusunu seçin.

  6. Project adı alanında, uygulamayı adlandırın WebApplication1 . Oluştur’u seçin.

  7. Uygulamayı hata ayıklayıcı olmadan çalıştırmak için hata ayıklama olmadan Başlat ' ı seçin. Uygulamayı > hata ayıklayıcıyla çalıştırmak için uygulamayı Başlat hata ayıklaması veya Çalıştır (▶) düğmesini çalıştırın.

Geliştirme sertifikasına güvenmek için bir istem görünürse, sertifikaya güvenin ve devam edin. Sertifikaya güvenmek için Kullanıcı ve anahtarlık parolaların olması gerekir. ASP.NET Core HTTPS geliştirme sertifikasını güvenme hakkında daha fazla bilgi için bkz ASP.NET Core 'de HTTPS 'yi zorla ..

Barındırılan bir uygulamayı yürütürken Blazor WebAssembly uygulamayı çözüm Server projesinden çalıştırın.

platformlar arası geliştirme için Visual Studio Code kullanma Blazor

Visual Studio Code , uygulama geliştirmek için kullanılabilen, açık kaynaklı, platformlar arası tümleşik geliştirme ortamıdır (ıde) Blazor . Visual Studio Code ile geliştirme için yeni bir uygulama oluşturmak üzere .NET CLı 'yi kullanın Blazor . Daha fazla bilgi için Bu makalenin Linux sürümünebakın.

Blazor Şablon seçenekleri

BlazorFramework, iki barındırma modelinin her biri için yeni uygulamalar oluşturmaya yönelik şablonlar sağlar Blazor . şablonlar, Blazor geliştirme için seçtiğiniz araç Blazor (Visual Studio, Mac için Visual Studio, Visual Studio Code veya .net clı) ne olursa olsun yeni projeler ve çözümler oluşturmak için kullanılır:

  • Blazor WebAssembly Proje şablonu: blazorwasm
  • Blazor Server Proje şablonu: blazorserver

Barındırma modelleri hakkında daha fazla bilgi için Blazor bkz ASP.NET Core Blazor barındırma modelleri .. Proje şablonları hakkında daha fazla bilgi için Blazor bkz BlazorASP.NET Core proje yapısı ..

Şablon seçenekleri, -h --help dotnet new komut kabuğu 'ndaki CLI komutuna yardım seçeneği (veya) geçirerek kullanılabilir:

dotnet new blazorwasm -h
dotnet new blazorserver -h

Ek kaynaklar