iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
3
Modern Web

今晚,我想來點Blazor系列 第 3

Day 3:安裝

  • 分享至 

  • xImage
  •  

要開始進行Blazor開發之前,我們先來了解Blazor安裝的過程。

1. 安裝.NET Core SDK

一開始先安裝.NET Core 3.1的SDK,可以到.NET Core的下載網站https://dotnet.microsoft.com/download,根據自己的作業系統選擇SDK並下載

畫面上可以看到有.NET Core Runtime和.NET Core SDK可以下載,這邊我們選擇下載SDK並安裝

安裝完成後,我們可以開啟命令提示字元,輸入dotnet --version確認安裝版本,有顯示版本號即順利安裝完成。

2. 建立Blazor專案

我們可以使用Visual Studio 或Visual Studio Code來開發Blazor專案,先來看看用Visual Studio的建立方式:

開啟Visual Studio 2019 → 建立新專案 →選擇Blazor應用程式
https://ithelp.ithome.com.tw/upload/images/20200917/201300581b7ykr2ZAB.png

選擇專案目錄路徑
https://ithelp.ithome.com.tw/upload/images/20200917/20130058gvaFGj57Ta.png

在這邊有兩種Blazor專案可以選擇,分別是Blazor伺服器應用程式(Blazor Server)與Blazor WebAssembly兩種,在下一篇我們將會來認識這兩種Blazor專案,現階段我們先選擇Blazor WebAssembly App (如果看不到Blazor WebAssembly範本,可將.NET SDK升級到3.1.3以上的版本)
https://ithelp.ithome.com.tw/upload/images/20200917/20130058FBf77jUzC3.png

專案建立完成後,按Ctrl+F5,就可以看到run起來的畫面囉
https://ithelp.ithome.com.tw/upload/images/20200917/20130058Z2tU3nS4c3.png

再來我們看看用Visual Studio Code要怎麼建立Blazor專案

  1. 確認Visual Studio Code已安裝C# Extension。
  2. 開啟命令提示字元,輸入dotnet new blazorwasm -n BlazorDemo,-n 參數為專案名稱,若沒有輸入專案名稱的話,會直接在當前目錄建立專案。
  3. 移至BlazorDemo資料夾
  4. 在命令提示字元輸入dotnet run執行應用程式,輸入後可以看到http://localhost:{port}
  5. 在Broswer輸入http://localhost:{port},即可開啟Blazor WebAssembly App

在安裝過程中我們有看到Blazor Server和Blazor WebAssembly兩種Blazor專案,明天我們來了解這兩種專案。


上一篇
Day 2:Blazor 簡介
下一篇
Day 4:Hosting models
系列文
今晚,我想來點Blazor30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言