二、建立开发环境

在上一章中，你学习了 ASP.NET Core 简介及其最新特性。 Vue.js 也是如此; 你已经了解了 Vue.js 及其在 Vue.js 3 中最新添加的功能。

本章将教你如何设置您的计算机的开发环境，以构建后端和前端 web 应用。 我们将使用不同的 ide 和文本编辑器来编写代码，并确保在进行应用开发之前一切都已设置好。

从头开始安装所有东西将使我们在编写代码时不受干扰。

在本章中，我们将涵盖以下主题:

  • 安装 VS Code, Visual Studio 2019, VS for Mac 和 Rider
  • 安装。net 5 SDK、Node.js 和npm
  • 设置。net Core CLI 和 Vue CLI
  • 正在安装 Postman 和 Vue DevTool
  • 安装实体框架核心工具
  • 安装不同的数据库提供程序
  • 安装 Git 版本控制

技术要求

以下是你需要安装的软件的链接:

安装和配置 VS Code, Visual Studio 2019, VS for Mac 和 Rider

本节将指导您安装和配置您所选择的 IDE 或文本编辑器。 下面是根据您的机器或操作系统可以使用的内容的快速分解。

VS Code

通过https://code.visualstudio.com/download下载 VS Code 安装程序。 我建议不管你的机器的操作系统是什么，都安装 VS Code，因为这是我在编写 JavaScript 应用时推荐的理想文本编辑器。

编辑器内置了对 TypeScript、智能感知、格式化、代码导航的支持，并且有大量的扩展供你使用。 在安装 VS Code 后添加以下基本 VS 扩展:

  • 代码拼写检查:这是一个源代码的拼写检查器，它可以帮助您避免由拼写错误引起的 bug。
  • Prettier:这是一个代码格式化器，它会在每次保存时重新格式化文件的代码。
  • Vetur:这个扩展为 VS Code 提供了语法高亮、代码片段、emmet、linting 和编写 Vue.js 应用的智能感知等特性。

这就结束了 VS Code 的安装和配置。 你的 VS Code 文本编辑器现在已经为 Vue.js 开发设置好了。

Visual Studio 2019

当使用 c#或 f#编写应用时，这个 IDE 是每个。net 开发人员首选的。 Visual Studio 2019 有很多不同的功能来满足你的需求。 以下是 VisualStudio 2019 中强大的工具列表:

  • 开发:如果你卡住了，使用智能感知来提供代码建议。
  • Analyze:使用 CodeLens 查看代码、单元测试、提交历史等等的变化。
  • Debug:检查 bug 的断点。
  • Test:一个测试套件查看器，这样您可以轻松地导航和组织您的测试。
  • 版本控制:你有两个版本控制引擎可以选择——Git，默认的版本控制和 Team Foundation。
  • 协作:使用 Live Share 实时编辑和调试同事的代码。 这个特性对远程工作的开发人员很有帮助。
  • Deploy:使用Publish按钮来部署 ASP 等应用.NET Core 无需离开 Visual Studio。

您应该到https://visualstudio.microsoft.com/vs/下载安装程序。 你可以选择社区版本，这是 Visual Studio 的免费版本。

下载后，运行安装程序，只安装您需要的部分.NETCore 5 开发。 选择以下选项:

  • NET&web 开发
  • 数据存储&处理
  • .NET Core 跨平台开发

所有组件包的总文件大小约为 20 GB，因此不要对这些包感到太激动，否则您可能会在机器上安装过多的 IDE 组件。

另一件要记住的事情是，一个糟糕的互联网连接将增加安装 Visual Studio 2019 和 IDE 组件的时间。

安装完成后，创建一个控制台 App(.NET Core)项目。 请不要运行这个项目; 你只需要打开它，点击顶部导航栏上的Extensions选项卡，然后点击Manage Extensions，它就会弹出。 向下滚动并下载生产力动力工具 2017/2019。 生产力动力工具扩展将安装以下扩展，这将提高您的开发效率:

  • 对齐作业:在 Visual Studio 中添加命令来格式化作业。
  • 复制为 HTML:增加了以 HTML 格式复制文本到剪贴板的支持。
  • 双击最大化:允许您最大化和停靠窗口标题。
  • Fixed Mixed Tabs:一个可以修复混合制表符和空格的工具。
  • 匹配边距:在滚动条中为插入符号下的单词的匹配绘制标记。
  • 中单击滚动:允许您使用鼠标中单击按钮在编辑器窗格中滚动。
  • Peek Help:在代码中显示一个小的F1-Help指南。
  • Power Commands:在保存时格式化文档，清除所有窗格，折叠项目，打开包含文件夹(意味着您将在目录中看到当前文件的位置)，清除最近的文件列表，等等。
  • 解决方案错误可视化工具:显示并突出显示解决方案资源管理器中的错误和警告。
  • 收缩空行:收缩包含数字或文本的行，在编辑器中显示更多行。

下载完Productivity Power工具后，关闭 Visual Studio 2019 以启动扩展安装。 您将看到 VSIX 安装程序正在初始化您下载的扩展; 单击Ok和Modify开始安装。

这就结束了 Visual Studio 2019 的安装和配置; 您的 Windows 机器中的 IDE 已经全部设置好了。

Visual Studio for Mac

Visual Studio for Mac是 VisualStudio 2019 for Mac 机器。 你可以使用这个 IDE 为 iOS、Android 和。net 开发应用和游戏。 下面的是你在 Visual Studio for Mac 中会注意到的主要特性:

  • 你可以使用这个 IDE 来编写 c#， f#， Razor, HTML, CSS, JS, TypeScript, XAML 和 XML。
  • IDE 拥有由 Roslyn (. net 编译器平台分析器)提供的高级智能感知。
  • IDE 有一个功能强大的调试工具，它允许您进入和退出函数并检查代码栈状态。
  • IDE 具有强大的内置重构选项，比如extract方法和代码中的函数或方法重命名。
  • Visual Studio for Mac IDE 提供了一个集成的源代码控件来管理 Git 或 SVN 存储库中的代码。
  • IDE 支持主要的测试框架，如 NUnit、MSTest 和 xUnit。 该 IDE 允许您高效地运行和调试单元测试和 UI 测试。
  • IDE 允许您与使用 Windows 或 macOS 的团队成员共享 c#和 f#项目。

要下载 VisualStudio for Mac，你需要去https://visualstudio.microsoft.com/vs/mac/，然后安装它。 与带有扩展的 Visual Studio 2019 不同，VisualStudio for Mac 只有很少的扩展可以安装。 不幸的是，在我看来，没有一个扩展对于开发 ASP 是有用的.NET 核心。

这一节就到此结束了。现在让我们看看如何安装 Rider。

骑手

如果您正在使用 Linux，那么 Rider 最适合您。 来自 JetBrains 的 Rider是一个跨平台的。net IDE，这意味着你可以开发。net、。net Core、Xamarin、Unity 或 ASP.NET 应用在 Windows、Mac 和 Linux 上。 JetBrains 也是 ReSharper(一个流行的 Visual Studio 扩展)的创建者。

由于 Visual Studio 2019 并不存在于基于 Linux 的操作系统中，而我们需要一个快速且强大的 IDE 来编写后端，因此 Rider 将是 Linux 机器的 IDE 候选。

Rider 中的功能与 Visual Studio 2019 提供的功能几乎相同。 你可以使用代码分析、代码编辑、重构、单元测试运行器、调试器、数据库管理工具、代码导航、准备好的前端框架和插件。

下载 Rider，请进入https://www.jetbrains.com/rider/并开始安装。 不需要配置 Rider 或添加插件，因为 Rider 功能丰富且快速。

现在，您已经安装和配置了用于编写 Vue.js 3 应用的文本编辑器和用于构建 ASP 的 IDE.NET Core 5 api。 你已经了解了在哪里可以下载 VS Code、Visual Studio IDE 和 Rider 的安装程序，以及它们应该使用哪些特定的操作系统。 你也知道应该安装哪些 Visual Studio 和 VS Code 扩展来提高开发效率。

在下一节中，你将安装。net Core SDK、Node.js 和 npm (Node Package Manager)。

安装。net SDK, Node.js 和 npm

本节将解释。net Core SDK、Node.js runtime 和npm是什么。 本节还将指导您在 Windows、Mac 和 Linux 下安装。net Core SDK 和 Node.js 运行时。

.net SDK

. net Core SDK 由一些库和工具组成，这些库和工具可以让你编写。net Core 应用。 如果您正在使用 Visual Studio 2019 和 Visual Studio Mac,你不需要安装 5 . net 运行时从 Visual Studio IDE 中包括. NET Core SDK 安装。NET Core SDK 也有。net 命令行界面和. NET Core 运行时(底层层为。net 应用运行)运行. NET Core 应用。

因此，如果您正在使用 Linux 并安装了 Rider，您可以从https://dotnet.microsoft.com/download下载并安装。net 5 SDK 开始。

Node 和 npm

Node(或 Node.js)是一个开源的跨平台运行环境，用于在浏览器外执行 JavaScript 代码。 更重要的是要知道，构建 Vue.js 是在npm的帮助下构建应用。

npm或节点包管理器是一个 CLI 工具，是第三方 JavaScript 库的注册表，可以添加到节点应用中。 因此，对于您希望在应用中包含的任何功能，我相信可以从npm注册表中使用开源库或模块。

这里，我将 Node.js 和npm的安装结合起来，因为安装 Node.js 也会自动安装npm。 因此，转到https://nodejs.org/en/下载安装程序。 请下载并安装LTS 版本，这是长期支持的缩写，而不是当前版本，因为一些云服务和npm库只使用 LTS 版本，这将不能使您的应用与它们的兼容。

最后，对于 Linux 用户，你可以在你的终端中运行以下命令:

sudo apt install nodejs

它会在你的机器上安装 Node.js 的最新 LTS 版本。 在 Linux 中也有其他安装 Node.js 的方法，但我发现这比其他方法更简单。

现在你已经了解了。net Core SDK 是什么，以及从哪里获取。net Core SDK 5(最新版本)。 你能够理解什么是 Node.js 运行时以及npm是如何工作的。 您也有安装它们的经验。

现在，我们将继续下一节，设置. net Core 命令行界面和 Vue 命令行界面。

.NET Core CLI 和 Vue CLI 设置

. net CoreCLI 是用于编写、构建、运行和发布. net Core 应用的跨平台命令行接口。 . net Core SDK 安装还会在后台安装。net Core CLI。

另一方面，Vue CLI，在中，是开发 Vue.js 应用的标准工具。 在创建项目和添加第三方库(如 Vue.js UI 库和 Vue.js 状态管理库)时，您将使用 Vue CLI。 要安装 Vue.js CLI，只需运行npm install -g @vue/cli命令，该命令将在您的机器上全局安装 Vue.js CLI。

您将能够在第 10 章、中使用 Vue CLI增强 Redis 的性能。

现在，您已经了解了. net Core CLI 和 Vue CLI 是什么，以及它们如何加快开发速度，并且已经体验了它们的安装过程。

在下一节中，您将安装 Postman(用于测试 api 的工具)和 Vue DevTool(用于 Vue.js 应用的浏览器扩展)。

安装 Postman 和 Vue DevTool

Postman是一个 API 开发平台。 无论何时构建 RESTful 服务，Postman 都是向正在编写的 api 发送 HTTP 请求以查看 api 控制器行为的优秀工具。 当你在第 9 章中开始编写 api 时，你将学习如何使用它.NET Core。

切换到 VueDevTool，这个工具通过在 DevTool 中提供一个用户界面来帮助你调试你的应用，在这里你可以查看你的 Vuex 商店，事件，路由，和你的 Vue 应用的性能。

您将使用这个动作当你开始建立你的路线在第十二章,使用 UI 组件库和创建路线和导航和【T7 Vue.js 店】第 14 章【显示】,与 Vuex 简化状态管理和发送 HTTP 请求。

现在，您知道在开发后端时使用哪个工具来测试 HTTP 请求了。 您还了解了要安装什么浏览器扩展，以及它如何帮助您在 Vue.js 应用中进行调试。

在下一节中，您将切换到数据库部分并安装 Entity Framework Core 工具。

安装实体框架核心工具

实体框架核心工具是实体框架核心的 CLI 工具。 简而言之，它使您能够运行常用的实体框架命令，如以下:

  • Add-Migration:添加新的迁移
  • Drop-Database:删除数据库
  • 列出并获取有关DbContext类型的信息
  • Script-Migrations:创建迁移 SQL 脚本
  • Update-Database:更新数据库到最新的迁移

您可以在 Windows、Mac 或 Linux 机器上的终端上运行以下命令来全局安装此工具:

dotnet tool install --global dotnet-ef

您将在本书的第五章，设置 DbContext 和控制器中看到 EF Core CLI 工具的实际应用。

*现在您已经了解了 EF Core tools CLI 是什么以及它可以运行的命令。

在下一节中，我们将讨论安装哪个数据库提供程序、为什么要安装它以及如何安装它。

安装数据库提供程序

EF Core 通过使用 NuGet 库作为插件数据库提供者，可以使用多个不同的数据库。 你可以找到 MS SQL Server, MySQL, PostgreSQL, Oracle DB 和 SQLite 的提供商。

因为安装任何 SQL 数据库服务器都很麻烦，所以您将使用 SQLite，它也具有与在其他数据库中使用的相同的查询命令。 实体框架作为一个 ORM，处理不同数据库之间查询命令的所有兼容性。

SQLite 不需要数据库服务器来运行，可以在 Windows、Macbook 和 Linux 上轻松运行。 在学习 EF Core 和DbContext的同时，SQLite 的简单设置和可移植性非常适合您的数据库提供商。

那么你现在需要什么软件呢? 您可以从https://sqlitebrowser.org/下载安装 DB Browserfor SQLite，或者从https://sqlitestudio.pl/下载安装 SQLiteStudio，这是一个跨平台的开源浏览器。

重要提示

建议在 Docker 容器中安装数据库服务器，以便在团队中所有开发人员之间推广相同的版本和环境。 但是在 Docker 容器中使用数据库服务器超出了本书的范围。

然而，我们仍将在第 19 章、、【GitHub Actions Automatic Deployment Using GitHub Actions and Azure中探讨 Docker 和容器的更多信息。

现在我们差不多到了这一章的末尾。 接下来，我们来看看 Git 版本控制。

安装 Git 版本控制

安装 Git(一个 T0)分布式版本控制系统)将是您要做的最后一项设置。 但这并不意味着它是最不重要的。 您将需要它来保存存储库的不同版本和阶段。 Git 还可以帮助您回滚存储库的最新工作版本，如果您在代码中做出了破坏应用的更改，并且您无法再修复它们。

到http://git-scm.com/和点击屏幕上的下载按钮下载并安装 Git。

现在，您已经从最后一节中了解了 Git 版本控制、从哪里获得它、它的作用以及为什么它如此重要，让我们总结一下所有内容。

总结

至此，我们已经到了本章的末尾。 让我们回顾一下你所学到的基本知识。 你已经了解了 VS Code 文本编辑器和 Rider IDE 可以在任何操作系统上使用。 Visual Studio 2019 适用于 ASP。 asp.NET Core 开发在 Windows，而 Visual Studio 为 Mac 适合 ASP.NET 内核开发的 macOS。

您还了解了。net 5 SDK 是构建。net Core 应用所必需的。 另一方面，Node Package Manager 是一个 JavaScript 库包管理器。 除此之外，它还是一个 CLI 工具，用于创建像 Vue.js 这样的现代 JavaScript 应用。

Postman 是用于测试 REST API 调用的 API 工具，而 Vue CLI 是用于搭建 Vue.js 应用的工具。

也有不同的数据库提供商，如 MS SQL Server、MySQL、PostgreSQL、Oracle DB 和 SQLite，它们都有可用于 ASP 的 NuGet 包库.NET Core 5。

最后但并非最不重要的一点是，Git 版本控制是保存和创建代码历史记录的必备工具，您可以轻松地回滚或创建应用的新版本。

在下一章中，您将构建您的第一个 ASP.NET Core 5 项目。*

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/30297.html