【翻譯】在Mac上使用VSCode建立你的第一個Asp.Net Core應用

標籤：csharp   sam   update   learn   ase   currently   reference   cts   with   

Setting Up Your Development Environment 設定你的開發環境

To setup your development machine download and install .NET Core and Visual Studio Code with the C# extension. Node.js and npm is also required. If not already installed visit nodejs.org.

首先在你的機器上下載.Net Core和Visual Studio Code和相應的 C#擴充外掛程式。Node.js和npm也是必須的，如果你的機器上沒有，可以從Nodejs.org下載安裝。 Scaffolding Applications Using Yeoman 使用Yeoman搭建應用

We will be using [yo aspnet] to generate the Web Application Basic template, you may follow the full instructions in Building Projects with Yeoman to create an ASP.NET Core project which show an Empty Web for reference.

我們將使用[yo aspnet]去產生Web應用程式的基礎模板，你也可以按照Building Projects with Yeoman的步驟建立一個空的Asp.Net Core Web應用程式。

Install the necessary yeoman generators and bower using npm.

使用npm安裝必要的yeoman產生器和bower。

npm install -g yo generator-aspnet bower

Run the ASP.NET Core generator

運行Asp.Net Core產生器

yo aspnet

 

• Select Web Application Basic [without Membership and Authorization] and tap Enter

• 選擇Web Application Basic [without Membership and Authorization] 然後斷行符號

• Select Bootstrap (3.3.6) as the UI framework and tap Enter

• UI framework下選擇Bootstrap(3.3.6) 然後斷行符號

• Use "MyFirstApp" for the app name and tap Enter

• 使用“MyFirstApp”作為引用的名稱，然後斷行符號

When the generator completes scaffolding the files, it will instruct you to restore, build, and run the application.

當產生完成所需的檔案後，它會提示你接下來該恢複、構建和運行這個應用程式。

Your project is now created, you can use the following commands to get going       cd "MyFirstApp"       dotnet restore       dotnet build (optional, build will also happen with it‘s run)       dotnet run

Developing ASP.NET Core Applications on a Mac With Visual Studio Code

在Mac上使用Visual Studio Code開發Asp.Net Core應用程式

• Start Visual Studio Code

• 開啟Visual Studio Code

• Tap File > Open and navigate to your ASP.NET Core app

• 點擊 File > Open，導航到你的Asp.Net Core應用目錄

When the application is opened, Visual Studio Code will prompt to restore the needed project dependencies as well as add build and debug dependencies.

當應用程式被開啟時，Visual Studio Code會提示恢複所需的項目依賴項以及添加構建和調試所需的依賴項。

Tap "Yes" to add the build and debug assets.

點擊“Yes”添加所需構建和調試的組件。

Tap "Restore" to restore the project dependencies. Alternately, you can enter ??P in Visual Studio Code and then type dot as shown:

點擊“Restore”恢複項目所需依賴項。在開發中，你也可以在Visual Studio Code中按??P進行恢複：

You can run commands directly from within Visual Studio Code, including dotnet restore and any tools referenced in the project.json file, as well as custom tasks defined in .vscode/tasks.json. Visual Studio Code also includes an integrated console ? where you can execute these commands without leaving the editor.

你可以直接在Visual Studio Code中運行包括恢複和使用 project.json中的項目引用，也可以在.vscode/tasks.json中自訂任務。Visual Studio Code還包括整合的控制台，你可以在不離開編輯器的情況下執行這些命令。

If this is your first time using Visual Studio Code (or just Code for short), note that it provides a very streamlined, fast, clean interface for quickly working with files, while still providing tooling to make writing code extremely productive.

如果這是你第一次使用Visual Studio代碼(或剛用不久),你會發現它提供了一個非常精簡,快速、乾淨的介面,快速處理檔案,同時還提供了很多工具讓編寫代碼非常富有成效。

In the left navigation bar, there are five icons, representing four viewlets:

在左邊的導覽列中，有5個小表徵圖，分別是：

• Explore
• Search
• Git
• Debug
• Extensions

The Explorer viewlet allows you to quickly navigate within the folder system, as well as easily see the files you are currently working with. It displays a badge to indicate whether any files have unsaved changes, and new folders and files can easily be created (without having to open a separate dialog window). You can easily Save All from a menu option that appears on mouse over, as well.

這個瀏覽視圖能夠快速探索你的檔案目錄，以及你現在正在處理的檔案。它可以清晰得顯示哪些檔案沒有儲存，可以輕鬆得建立新檔案夾和新檔案（不需要開啟一個新的對話方塊）。你也可以試用滑鼠點擊儲存所有開啟需要儲存得檔案。

The Search viewlet allows you to quickly search within the folder structure, searching filenames as well as contents.

這個搜尋視圖允許你在檔案目錄中快速得搜尋檔案名稱和檔案內容。

Code will integrate with Git if it is installed on your system. You can easily initialize a new repository, make commits, and push changes from the Git viewlet.

VSCode已經整合了Git，你的系統如果已經安裝好的話，可直接使用。你可以在Git視圖裡輕鬆的create repository，commits，和push。

 

The Debug viewlet supports interactive debugging of applications.

Debug視圖支援與應用的互動式調試。

Code‘s editor has a ton of great features. You‘ll notice unused using statements are underlined and can be removed automatically by using ? . when the lightbulb icon appears. Classes and methods also display how many references there are in the project to them. If you‘re coming from Visual Studio, Code includes many of the same keyboard shortcuts, such as ?KC to comment a block of code, and ?KU to uncomment.

VSCode編輯器介面也有很多非常棒的功能。當有黃色燈泡小表徵圖時，你會發現沒有在沒有引用的聲明下有底線，可以使用?.自動修複。你的類和方法上會顯示它們在項目中有多少次被引用。如果你曾經使用過Visual Studio，你會發現VSCode擁有很多相同的快速鍵，比如?KC來注釋代碼，?KU來取消注釋等等。

More on editor in Visual Studio Code.

更多功能查看Visual Studio Code。 Running Locally Using Kestrel使用Kestrel在本地運行

The sample is configured to use Kestrel for the web server. You can see it configured in the project.json file, where it is specified as a dependency.

示範已經使用Kestrel配置好Web Server了。你可以在project.json檔案中看到它被配置成依賴項。

"Microsoft.AspNetCore.Server.Kestrel": Using Visual Studio Code Debugger使用Visual Studio Code調試

If you choose to have the debug and build assets added to the project:

如果需要調試的和構建的已經添加到項目中：

• Tap the Debug icon in the View Bar on the left pane

• 點擊左側面板中的Debug表徵圖

• Tap the "Play (F5)" icon to launch the app

• 點擊“Play(F5)”圖片，運行應用。

Your default browser will automatically launch and navigate to http://localhost:5000

你的預設瀏覽器將自動運行並開啟http://localhost:5000

• To stop the application, close the browser and hit the "Stop" icon on the debug bar
• 關閉瀏覽器點擊調試條上的“Stop”表徵圖，可以停止應用。

Using the dotnet commands使用dotnet命令

• Run dotnet run command to launch the app from terminal/bash

• 在terminal/bash中運行dotnet命令

• Navigate to http://localhost:5000

• 瀏覽器開啟http://localhost:5000

• To stop the web server enter ?+C.

• ?+C停止web伺服器

Publishing to Azure發布到Azure

Once you‘ve developed your application, you can easily use the Git integration built into Visual Studio Code to push updates to production, hosted on Microsoft Azure.

在你開發你的應用的時候，你能輕鬆的使用VSCode整合的Git更新到在Microsoft Azure上的生產環境。 Initialize Git初始化Git

Initialize Git in the folder you‘re working in. Tap on the Git viewlet and click the Initialize Git repository button.

在你工作的檔案中初始化Git。點擊Git視圖，再點擊Initialize Git repository按鈕。

Add a commit message and tap enter or tap the checkmark icon to commit the staged files.

添加一個提交資訊，敲擊斷行符號或點擊選擇相應的小表徵圖進行提交檔案。

Git is tracking changes, so if you make an update to a file, the Git viewlet will display the files that have changed since your last commit.

Git會跟蹤更改，如果你更新了一個檔案，Git視圖會顯示這個檔案自最後一次提交後有更改。 Initialize Azure Website初始化Azure Web網站

You can deploy to Azure Web Apps directly using Git.

你可以使用Git把應用程式部署到Azure。

• If you don‘t have an Azure account, you can create a free trial.
• 如果你還沒有Azure帳號，你可以點擊查看create a free trial

Create a Web App in the Azure Portal to host your new application.

在Azure後台建立一個Web應用部署你的新應用程式。

Configure the Web App in Azure to support continuous deployment using Git.

在Azure上配置Web應用以使其支援Git。

Record the Git URL for the Web App from the Azure portal.

從Azure後台記錄你的Git Url

In a Terminal window, add a remote named azure with the Git URL you noted previously.

在終端視窗中，添加一個名為azure提交到之前你記錄的Git Url上。

git remote add azure https://[email protected]:443/MyFirstAppMac.git

Push to master. git push azure master to deploy.

推送到master，git會推送到azure上相應的master。

Browse to the newly deployed web app.

開啟瀏覽器瀏覽您的應用。

Looking at the Deployment Details in the Azure Portal, you can see the logs and steps each time there is a commit to the branch.

在Azure後台你可以查看開發的詳細資料，包括每次提交到分支的日誌和步驟。

原文連結

https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/your-first-mac-aspnet

【翻譯】在Mac上使用VSCode建立你的第一個Asp.Net Core應用