用于 ASP.NET Core Blazor 的工具

  1. 安装带有“ASP.NET 和 Web 开发”工作负载的最新版本 Visual Studio 2019

  2. 创建新项目。

  3. 选择“Blazor 应用”。 选择“下一步”。

  4. 在“项目名称”字段提供项目名称,或接受默认项目名称。 确认“位置”条目正确无误或为项目提供位置。 选择“创建”。

  5. 若要获得 Blazor WebAssembly 体验,请选择“Blazor WebAssembly 应用”模板。 若要获得 Blazor Server 体验,请选择“Blazor Server 应用”模板。 选择“创建”。

    对于托管的 Blazor WebAssembly 体验,选择“托管的 ASP.NET Core”复选框。

    若要了解 Blazor WebAssembly(独立和托管)和 Blazor Server这两个 Blazor 托管模型,请参阅 ASP.NET Core Blazor 托管模型

  6. 按 Ctrl+F5 运行应用

有关信任 ASP.NET Core HTTPS 开发证书的详细信息,请参阅 在 ASP.NET Core 强制实施 HTTPS

执行托管应用 Blazor WebAssembly 时,请从解决方案的 Server 项目运行应用。

  1. 安装最新版本的 .NET Core SDK。 如果以前安装了该 SDK,可以通过在命令行界面中执行以下命令来确定已安装的版本:

    dotnet --version
    
  2. 安装最新版本的 Visual Studio Code

  3. 安装最新的 C# for Visual Studio Code 扩展

  4. 若要获得 Blazor WebAssembly 体验,请在命令行界面中执行以下命令:

    dotnet new blazorwasm -o WebApplication1
    

    对于托管的 Blazor WebAssembly 体验,请向命令添加托管选项 (-ho--hosted) 选项:

    dotnet new blazorwasm -o WebApplication1 -ho
    

    若要获得 Blazor Server 体验,请在命令行界面中执行以下命令:

    dotnet new blazorserver -o WebApplication1
    

    若要了解 Blazor WebAssembly(独立和托管)和 Blazor Server这两个 Blazor 托管模型,请参阅 ASP.NET Core Blazor 托管模型

  5. 在 Visual Studio Code 中打开 WebApplication1 文件夹,

  6. IDE 要求添加资产以用于生成和调试项目。 选择 “是”

    如果 Visual Studio Code 没有自动创建资产,请使用以下文件:

    .vscode/launch.json(配置为启动和调试 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"
            }
        ]
    }
    

    托管的 Blazor WebAssembly 启动和任务配置

    对于托管的 Blazor WebAssembly 解决方案,请将包含 launch.jsontasks.json 文件的 .vscode 文件夹添加(或移动)到解决方案的父文件夹中,父文件夹包含常见的项目文件夹:ClientServerShared。 更新或确认 launch.jsontasks.json 文件中的配置是否从 Server 项目执行托管应用 Blazor WebAssembly。

    .vscode/launch.jsonlaunch 配置):

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

    在当前工作目录 (cwd) 的前面配置中,{SERVER APP FOLDER} 占位符是 Server 项目的文件夹,通常为“Server”。

    如果使用 Microsoft Edge 并且系统上未安装 Google Chrome,请在配置中添加额外属性 "browser": "edge"

    Server 项目文件夹的示例,该示例将生成 Microsoft Edge(而不是默认浏览器 Google Chrome)作为调试运行的浏览器:

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

    .vscode/tasks.jsondotnet 命令参数):

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

    在上述参数中:

    • {SERVER APP FOLDER} 占位符是 Server 项目的文件夹,通常为“Server”。
    • {PROJECT NAME} 占位符是应用的名称,在 Blazor 项目模板生成的应用中,该名称通常基于解决方案的名称后跟“.Server”。

    来自将 SignalR 与 Blazor WebAssembly 应用配合使用的教程的以下示例使用项目文件夹名称 Server 和项目名称 BlazorWebAssemblySignalRApp.Server

    ...
    "args": [
      "build",
        "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
        ...
    ],
    ...
    
  7. 按 Ctrl+F5 运行应用

信任开发证书

Linux 上没有用于信任证书的集中途径。 通常采用以下方法之一:

  • 在浏览器的排除列表中排除应用的 URL。
  • 信任 localhost 的所有自签名证书。
  • 将证书添加到浏览器的受信任证书列表。

有关详细信息,请参阅浏览器制造商和 Linux 发行版提供的指南。

  1. 安装 Visual Studio for Mac

  2. 选择“文件” > “新建解决方案”或从“启动窗口”创建“新项目” 。

  3. 在边栏中,选择“Web 和控制台” > “应用”。

    若要获得 Blazor WebAssembly 体验,请选择“Blazor WebAssembly 应用”模板。 若要获得 Blazor Server 体验,请选择“Blazor Server 应用”模板。 选择“下一步”。

    若要了解 Blazor WebAssembly(独立和托管)和 Blazor Server这两个 Blazor 托管模型,请参阅 ASP.NET Core Blazor 托管模型

  4. 确认已将“身份验证”设置为“无身份验证”。 选择“下一步”。

  5. 对于托管的 Blazor WebAssembly 体验,选择“托管的 ASP.NET Core”复选框。

  6. 在“项目名称”字段中,将应用命名为 WebApplication1。 选择“创建”。

  7. 选择“运行” > “启动而不调试”以不使用调试程序运行应用 。 使用“运行” > “开始调试”运行应用,或者使用“运行 (▶)”按钮通过调试程序运行应用。

如果出现信任开发证书的提示,请信任证书并继续操作。 信任证书需要使用用户密码和密钥链密码。 有关信任 ASP.NET Core HTTPS 开发证书的详细信息,请参阅 在 ASP.NET Core 强制实施 HTTPS

执行托管应用 Blazor WebAssembly 时,请从解决方案的 Server 项目运行应用。

使用适用于跨平台 Blazor 开发的 Visual Studio Code

Visual Studio Code 是一个开源的跨平台集成开发环境 (IDE),可用于开发 Blazor 应用。 使用 .NET CLI 创建新的 Blazor 应用,来使用 Visual Studio Code 进行开发。 有关详细信息,请选择本文的 Linux 版本

Blazor 模板选项

Blazor 框架提供了一些模板,用于为每个 Blazor 托管模型(共两个)创建新应用。 模板用于创建新的 Blazor 项目和解决方案,而不考虑您选择用于 Blazor 开发的工具(Visual Studio、Visual Studio for Mac、Visual Studio Code 还是 .NET CLI):

  • Blazor WebAssembly 项目模板:blazorwasm
  • Blazor Server项目模板:blazorserver

有关 Blazor 的托管模型的详细信息,请参阅 ASP.NET Core Blazor 托管模型。 有关 Blazor 项目模板的更多信息,请参阅“ASP.NET Core Blazor 项目结构”。

通过将 help 选项(-h--help)传递给命令行界面中的 dotnet new CLI 命令,可使用模板选项:

dotnet new blazorwasm -h
dotnet new blazorserver -h

其他资源