练习 - 配置开发环境

• 8 分钟

在本练习中，你将安装必要的工具和组件，以便使用 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 调试器(夜间)”。

   

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

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

5. 选择“为 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。

   

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

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