练习 - 配置开发环境

已完成

在本练习中,你将安装必要的工具和组件,以便使用 Visual Studio Code 应用程序在本地生成 Blazor WebAssembly 客户端应用。

此练习假定你已安装 Visual Studio Code。 可从 https://code.visualstudio.com/ 下载适用于 Windows、macOS 或 Linux 的 Visual Studio Code。

安装工具和模板

首先下载 Microsoft .NET Core 3.1 SDK。 其中包含 .NET Core SDK、.NET Core 运行时和 ASP.NET Core 运行时。

通过从 https://dotnet.microsoft.com/download/dotnet-core/3.1 为操作系统下载最新版来安装 .NET Core 3.1。

安装 Visual Studio Code 扩展

要开发 Blazor WebAssembly 应用,请安装以下两个 Visual Studio Code 扩展:Microsoft C# 扩展和 JavaScript 调试器扩展。

安装 C# for Visual Studio Code 扩展

  1. 在本地计算机上打开 Visual Studio Code。

  2. 通过选择最左侧窗格中的“扩展”符号,打开扩展浏览器。 或在 Windows 中,选择 Ctrl+Shift+X

  3. 搜索“C# for Visual Studio Code”。

  4. 选择“按照”,安装“C# for Visual Studio Code (由 OmniSharp 提供支持)”扩展。

安装 JavaScript 调试器扩展

JavaScript 调试器扩展目前以预览版提供。 此处将安装最新版本。

  1. 通过选择最左侧窗格中的“扩展”符号,在 Visual Studio Code 中打开扩展浏览器。 或在 Windows 中,选择 Ctrl+Shift+X

  2. 搜索“JavaScript 调试器”。

  3. 选择“安装”按钮,安装“JavaScript 调试器(夜间)”扩展。

配置 JavaScript 调试器扩展

  1. 通过选择最左侧窗格中的“扩展”符号,在 Visual Studio Code 中打开扩展浏览器。 或在 Windows 中,选择 Ctrl+Shift+X

  2. 在已启用的扩展列表中,选择“JavaScript 调试器(夜间)”。

    在扩展浏览器中显示已安装的 Visual Studio Code 扩展并突出显示 JavaScript 调试器扩展的屏幕截图

  3. 要打开扩展设置,请选择并按住(或右键单击)“JavaScript 调试器(夜间)”,并选择“扩展设置”。

  4. 滚动到“调试”>“JavaScript 使用预览版”设置。

  5. 选择“为 Node.js 和 Chrome 使用新的预览版 JavaScript 调试器”。

    显示已选择“为 Node.js 和 Chrome 使用新的预览版 JavaScript 调试器”设置的屏幕截图

创建新的 Blazor WebAssembly 应用

为了验证设置,请创建使用已安装的模板的新 Blazor WebAssembly 客户端 Web 应用。

  1. 在本地开发计算机上打开终端或命令提示符窗口。

  2. 在命令提示符处,输入 dotnet new blazorwasm -o CICalc。

  3. 转到 CICalc 子文件夹。

运行应用

  1. 在命令提示符处,输入 dotnet run 以运行应用。

  2. 在 Web 浏览器中,转到 https://localhost:5000。

    显示在浏览器中运行的默认 Blazor WebAssembly 客户端应用的屏幕截图

  3. 在 Visual Studio Code 中返回到终端并按 Ctrl+C 停止应用。

将在后面的练习中使用此 Blazor 应用。