RazorSvelte
1.0.0
筆記：
還評估了其他幾個UI組件框架，最後使用Bootstrap解決此模板。
要使用其他模板，例如碳或材料UI，請參見下面的該文件中的安裝說明。
這是一個項目模板，因此不斷更新改進，新組件需要更現代，更通用的Web應用程序。
項目模板存儲庫包含具有以下設置的模板項目：
chart - 圖表的包裝器。chart-box - 帶標題和全屏縮放按鈕的圖表。data-grid - 使用Bootstrap表的遠程數據源的數據網格。modal - 引導模式的包裝器。multiselect - 使用搜索和虛擬滾動選擇多個下拉次數。offcanvas啟動off Canvas的包裝紙。pager -Bootstrap Pager可與數據網格一起使用。placeholder - 基於自舉的佔位符的裝載佔位符，主要由其他組件用於管理非初始化狀態。search-input - 具有處理搜索超時並防止多個搜索請求的搜索圖標的簡單搜索輸入。要查看這些組件的用法示例，請參閱此項目。
請按照以下步驟構建並運行Razorsvelte演示應用程序：
從https://raw.githubusercontent.com/vb-consulting/razorsvelte/razorsvelte/master/master/dockerfile下載Dockerfile（或者只需運行wget https：//raw.githubusercontent.com/raw.githubusercont.com/vb-consulting/razorsulting/razorsvelte/razorsvelte/razorsvelte/master/master/Master/Master/Master/Master/master/master/command inters）提示
打開命令提示符並導航到保存Dockerfile的文件夾
運行以下命令：
docker build -t razorsvelte . docker run --rm -it -p 5000:80 --name razorsvelte razorsvelte:latest
筆記：
如果您嘗試使用外部提供商登錄，您將被重定向到錯誤頁面。請使用您自己的客戶端提供商ID和客戶端秘密編輯
appsettings.json，並確保將OAUTH應用程序重定向到`localhost：5000```-'' - 以啟用此功能。
/ ：索引頁 - world from svelte值並顯示有用的鏈接/privacy - 隱私示例頁面，顯示從剃刀頁ViewData傳遞的Svelte頁面中的H1標題。/login - 顯示外部登錄按鈕/authorized - 用Authorize屬性保護的示例授權頁面。顯示從剃須刀頁面傳遞的簡單授權用戶數據。/401示例未經授權的頁面，當未經授權的用戶試圖使用Authorize屬性訪問頁面時，該頁面會重定向。/404找不到未知服務器路由的頁面。/spa單頁應用程序（SPA）的示例，帶有標籤客戶端路由器組件，該組件以水療方式顯示各種路線。重要說明：
wwwroot中，您通常可以將其導入剃須刀頁面（或任何其他頁面）。Svelte是一種構建用戶界面的根本新方法。
儘管諸如React和Vue之類的傳統框架在瀏覽器中進行大部分工作，但Svelte將有效的步驟轉變為構建應用程序時發生的編譯步驟。 Svelte不用使用虛擬DOM擴散等技術，而是在應用程序狀態更改時會手術更新DOM的代碼。
Svelte是一種編譯器，可產生小且非常優化的JavaScript輸出。
Svelte也將您的標記捆綁到編譯器輸出中，甚至比普通標記要小。
然後將Svelte編譯器輸出緩存在瀏覽器中，這使得每個後續請求甚至更快，因為瀏覽器甚至不必再次下載該標記。
由於Svelte生產純淨的香草JavaScript，因此沒有開銷。這也意味著您可以（使用匯總）和可能需要的運行時框架進行導入和捆綁，也許可以重用您可能擁有的舊UI組件。例如，使用jQuery代碼。
根據Stackoverflow調查，Svelte已成為2021年中開發人員最受歡迎的網絡框架。
匯總已經預先配置，可以與ASP.NET項目，編譯，捆綁包和刪除未使用的模塊一起運行，然後輸出到您的ASP.NET項目的wwwroot中。
您也可以像往常一樣繼續使用普通的ASP.NET Razor頁面（或MVC）。
結果是一個非常**優化的Web ****應用程序***：
而且，您可以將服務器端渲染與優化的Svelte前端渲染相結合。
最重要的是 - 您可以使用此模板避免使用乏味的配置。
$ npx degit vb-consulting/RazorSvelte
> cloned vb-consulting/RazorSvelte#HEAD
$ cd RazorSvelte
$ npm install
...
$ dotnet run
$ npx degit vb-consulting/RazorSvelte#carbon
> cloned vb-consulting/RazorSvelte#carbon
$ cd RazorSvelte
$ npm install
...
$ dotnet run
$ npx degit vb-consulting/RazorSvelte#svelte-material-ui
> cloned vb-consulting/RazorSvelte#svelte-material-ui
$ cd RazorSvelte
$ npm install
...
$ dotnet run
$ npx degit vb-consulting/RazorSvelte#net5
> cloned vb-consulting/RazorSvelte#net5
$ cd RazorSvelte
$ npm install
...
$ dotnet run
jQuery示例只有一個頁面，可以演示如何將JQuery與Svelte和Sulup捆綁在一起。
$ npx degit vb-consulting/RazorSvelte#jquery
> cloned vb-consulting/RazorSvelte#jquery
$ cd RazorSvelte
$ npm install
...
$ dotnet run
筆記：
degit只是只需下載並解壓縮Git Repo內容的最新版本而無需存儲庫初始化（例如，與git clone不同）。只需單擊“大綠色”按鈕使用此模板。
如果您想要其他模板而不是主模板（例如jQuery或Net5示例），請先更改分支。
每個剃須刀頁面都有兩個新的嵌套文件：
MyPage.rollup.config.js此頁面的匯總配置文件。MyPage.entry.ts此頁面的輸入點打字標記模塊文件。筆記：
MyPage.cshtml （通過項目文件設置），因此諸如VisualStudio和Jetbrains Rider之類的IDE會視覺上嵌套它們。*.cshtml的項目名稱和${basename}.cshtml.cs, ${basename}.entry.ts, ${basename}.rollup.config.js項目名稱。配置文件從Scripts/rollup. config`並設置以下值：
wwwroot /build plus entry module name with the ）。wwwroot /build plus entry module name with 。請參閱此存儲庫中的示例頁面。
輸入TypeScript模塊導入此頁面的Svelte文件，並返回Svelte應用程序。
在此模板中，所有示例使用document.body作為應用程序目標。這意味著默認佈局Pages/Shared/_Layout.cshtml僅包含一個主體。
身體內容由Razor頁面本身和svelte組件渲染。
每個啟用的SVELTE剃須刀頁面還必須包括輸出JavaScript和CSS（例如），例如，索引頁：
@section HeadSection {
< link href = " ~/build/index.css " asp-append-version = " true " rel = " stylesheet " />
< script defer src = " ~/build/index.js " asp-append-version = " true " ></ script >
}所有Svelte組件和其他模塊都在單獨的App程序中。
如上所述，相關的剃須刀頁面使用了一個根中的每個svelte文件組件。在此示例中，他們每個人都會渲染標題，主部分和頁腳。
這意味著大部分標記是由Svelte編譯器在每個頁面的單個JavaScript文件中生產的，平均大小約為18KB。
渲染是即時的，JS輸出被緩存在客戶端上，以減少下載尺寸。
dotnet命令用於NPM腳本UI擴展（從您的IDE運行）：
dotnet run dotnet-run 。dotnet-clean dotnet clean ：用於dotnet清潔。dotnet-build ：用於dotnet build 。SCSS樣式支持
fe-scss-build ：從SCSS文件App/scss/style.scss構建全局CSS文件wwwroot/style.css以導入的scss files格式構建。fe-scss-watch ：從SCSS文件App/scss/style.scss構建全局CSS文件wwwroot/style.css 。建立對Index頁面的支持
fe-build ：為Index頁面構建JavaScript。輸出是以壓縮格式的wwwroot/build/index.js沒有任何源地圖。 JavaScript文件無法調試。這是為了生產fe-watch ：為Index頁面構建JavaScript。輸出是帶有源地圖的未壓縮格式的wwwroot/build/index.js 。可以調試JavaScript文件。這不是用於生產。該過程將繼續監視文件更改並相應地重建。這對於開發過程很有用。注意：要構建或觀看其他頁面，您可以使用此命令行npm run fe-build <page>或npm run fe-build <page> ，其中頁名是無擴展的小寫config文件。例如， ./Pages/Index.rollup.config.js index.rollup.config.js的index ， login ./Pages/Login.rollup.config.js ，等等。
所有頁面
fe-build-all ：前端構建。調用Scripts/build-all.js腳本以構建和編譯所有頁面和所有樣式表。fe-watch-all: Frontend watch-all. Calls腳本/watch-all.js的腳本以構建，編譯和觀看所有頁面以及所有樣式表。其他：
npm-upgrade ：將所有NPM依賴項升級到最新版本。謹慎使用它。為了能夠運行此命令，需要全局npm-check-updates依賴性。使用npm install -g npm-check-updates安裝。code ：打開一個Visual Studio代碼的實例build-urls instokes .net c＃腳本自動創建包含所有應用程序URL的shared/urls.ts文件。構建後端，執行腳本命令並存在。此命令將使用UrlBuilderPath配置密鑰。build-models - instokes .net c＃腳本自動創建shared/models.d.ts 。構建後端，執行腳本命令並存在。此命令將在配置密鑰TsModelsFilePath （ shared/models.d.ts ）中創建一個打字稿文件，該文件將包含所有C＃public類，轉換為TypeScript界面，這些類別在ModelNamespace配置密鑰（ RazorSvelte.SampleData ）下的命名空間中存在。 是的。
您可以像通常一樣使用瀏覽器調試控制台進行調試。 JavaScript需要具有關聯的.map文件。
要創建一個.map文件運行rollup和配置文件作為使用-w Switch的參數命令。例如：
rollup -c ./Pages/Index.cshtml.js -w
此命令使用關聯的映射創建一個未壓縮的wwwroot/build/index.js文件，該文件可以在瀏覽器中進行調試。
在您的瀏覽器源選項卡中，您將看到您可以正常調試的App/index.svetle打字稿文件。
另外，此命令將繼續觀看您的源文件，並在您繼續更改它時逐步構建。
是的。
不要使用“構建”命令。而是使用上一個問題中所述的增量構建。
不，您不需要外部服務器。
該項目使用內置的.NET Web服務器。
但是，您將需要安裝nodejs和npm來運行匯總命令。
您將必須在這些服務上創建一個登錄應用程序來檢索客戶端ID和客戶端秘密值並將其粘貼到配置文件。
有關更多詳細信息，請參見AppSettings.json。
一旦通過了外部提供商的授權，該應用程序將使用JWT Auth進行外部提供商已確認的身份。因此，您必須配置JwtConfigSection值：
Secret - 長秘密隨機字符串Issuer -JWT令牌發行人Audience -JWT令牌觀眾ExpirationMin -JWT代幣到期時間分鐘ClockSkewMin添加到JWT令牌到期時間，設置為null以避免。RefreshTokenExpirationMin刷新象徵到期分鐘。設置為null以避免使用刷新令牌。如果使用它，生效必須比令牌到期的時間更長。CookieExpirationMin餅乾在幾分鐘內到期。如果使用的話，它必須比令牌的到期或刷新象徵性的屆滿最長的時間。CookieName安全曲奇的名稱。注意：如果使用令牌刷新選項，則可能需要重新實現RefreshTokenRepository類別以使用數據庫或某種永久緩存，而不是內存中的字典。
ASP.NET Web服務器仍在服務器上處理頁面路由。這意味著該項目不是單頁應用程序（SPA），儘管整個標記都包含在Svelte輸出中，這意味著它以水療中心的方式緩存在客戶端。
但是，服務器路由/spa之一是SPA應用程序的一個示例。此頁面使用svelte-spa-router ，並使用主題標籤路由顯示各種水療視圖。
是的，例如，使用隱藏的輸入。
<input id="title" type="hidden" value="@ViewData["Title"]" />在您的頁面中。 import { getValue } from "./shared/config" ;
let title = getValue < string > ( "title" ) ;除了更容易開發和維護的速度更加容易，更快，它的速度更快。整個標記都包含並縮小從Svelte組件中匯總的JavaScript文件中，然後首次下載，然後按照每個新請求進行緩存。
這大大減少了您的應用程序的網絡流量。
然後在頁面加載時立即渲染標記。
版權所有（C）VedranBilopavlović -VB諮詢和VB軟件2022此源代碼已根據MIT許可獲得許可。
