网新恒天

I was exploring the "dotnet new" experience last week and how you can extend templates, then today the .NET WebDev blog posted about Steve Sanderson's work around Single Page Apps (SPA). Perfect timing!

上周，我在探索“新的dotnet”体验，以及如何扩展模板，今天，.NET WebDev博客发布了有关Steve Sanderson关于Single Page Apps(SPA)的工作的信息。 时间恰好！

Since I have Visual Studio 2017 RC and my .NET Core SDK tools are also RC4:

由于我拥有Visual Studio 2017 RC，而我的.NET Core SDK工具也为RC4：

C:\Users\scott\Desktop\fancypants>dotnet --info.NET Command Line Tools (1.0.0-rc4-004771)

Product Information: Version:            1.0.0-rc4-004771 Commit SHA-1 hash:  4228198f0e

Runtime Environment: OS Name:     Windows OS Version:  10.0.15031 OS Platform: Windows RID:         win10-x64 Base Path:   C:\Program Files\dotnet\sdk\1.0.0-rc4-004771

I can then do this from the dotnet command line interface (CLI) and install the SPA templates:

然后，我可以从dotnet命令行界面(CLI)进行此操作并安装SPA模板：

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

The * is the package version so this is getting the latest templates from NuGet. I'm looking forward to using YOUR templates (docs are coming! These are fresh hot bits.)

*是软件包的版本，因此它将从NuGet获取最新的模板。 我期待使用您的模板(文档即将发布！这些都是新的热点。)

This command adds new templates to dotnet new. You can see the expanded list here:

此命令将新模板添加到dotnet new。 您可以在此处查看展开的列表：

Templates                                     Short Name      Language      Tags------------------------------------------------------------------------------------------Console Application                           console         [C#], F#      Common/ConsoleClass library                                 classlib        [C#], F#      Common/LibraryUnit Test Project                             mstest          [C#], F#      Test/MSTestxUnit Test Project                            xunit           [C#], F#      Test/xUnitEmpty ASP.NET Core Web Application            web             [C#]          Web/EmptyMVC ASP.NET Core Web Application              mvc             [C#], F#      Web/MVCMVC ASP.NET Core with Angular                 angular         [C#]          Web/MVC/SPAMVC ASP.NET Core with Aurelia                 aurelia         [C#]          Web/MVC/SPAMVC ASP.NET Core with Knockout.js             knockout        [C#]          Web/MVC/SPAMVC ASP.NET Core with React.js                react           [C#]          Web/MVC/SPAMVC ASP.NET Core with React.js and Redux      reactredux      [C#]          Web/MVC/SPAWeb API ASP.NET Core Web Application          webapi          [C#]          Web/WebAPISolution File                                 sln                           Solution

See there? Now I've got "dotnet new react" or "dotnet new angular" which is awesome. Now I just "npm install" and "dotnet restore" followed by a "dotnet run" and very quickly I have a great starter point for a SPA application written in ASP.NET Core 1.0 running on .NET Core 1.0. It even includes a dockerfile if I like.

看那边？ 现在，我获得了很棒的“ dotnet新React”或“ dotnet新角度”。 现在，我只需要“ npm install”和“ dotnet restore”，然后再进行“ dotnet run”，很快我就对以.NET Core 1.0运行的ASP.NET Core 1.0编写的SPA应用程序有了一个很好的起点。 如果我喜欢，它甚至包括一个dockerfile。

From the template, to help you get started, they've also set up:

通过模板，为了帮助您入门，他们还设置了：

• Client-side navigation. For example, click Counter then Back to return here.

  客户端导航。 例如，单击“计数器”，然后单击“返回”以在此处返回。

• Server-side prerendering. For faster initial loading and improved SEO, your Angular 2 app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over. THIS IS HUGE.

  服务器端预渲染。 为了更快地进行初始加载和改善SEO，您的Angular 2应用已预呈现在服务器上。 然后将生成HTML传输到浏览器，在此应用程序的客户端副本将接管。 这是巨大的。

• Webpack dev middleware. In development mode, there's no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.

  Webpack开发中间件。 在开发模式下，无需运行webpack构建工具。 您的客户端资源是按需动态构建的。 修改任何文件后，即可使用更新。

• Hot module replacement. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.

  热模块更换。 在开发模式下，进行大多数更改后，您甚至都不需要重新加载页面。 在保存对文件所做的更改的几秒钟内，您的Angular 2应用将被重建，并将新实例插入页面。

• Efficient production builds. In production mode, development-time features are disabled, and the webpack build tool produces minified static CSS and JavaScript files.

  高效的生产建立。 在生产模式下，将禁用开发时功能，并且webpack构建工具会生成webpack静态CSS和JavaScript文件。

Go and read about these new SPA templates in depth on the WebDev blog.

在WebDev博客上深入了解这些新的SPA模板。

Sponsor: Big thanks to Raygun! Join 40,000+ developers who monitor their apps with Raygun. Understand the root cause of errors, crashes and performance issues in your software applications. Installs in minutes, try it today!

赞助商：非常感谢Raygun ！ 加入40,000多名使用Raygun监视其应用程序的开发人员。 了解软件应用程序中错误，崩溃和性能问题的根本原因。 数分钟即可安装，立即尝试！

翻译自: https://www.hanselman.com/blog/dotnet-new-angular-and-dotnet-new-react

网新恒天