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-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许可获得许可。
