RazorSvelte
1.0.0
Nota:
Hay varios otros marcos de componentes de UI evaluados, y finalmente esta plantilla se resuelve con Bootstrap.
Para usar otras plantillas, por ejemplo, UI de carbono o material, consulte las instrucciones de instalación a continuación en este archivo.
Esta es una plantilla de proyecto y, como tal, se actualiza constantemente con mejoras y los nuevos componentes necesitan una aplicación web más moderna y versátil.
Repositorio de plantilla de proyecto que contiene un proyecto de plantilla con la siguiente configuración:
chart : envoltura para chart.js.chart-box -Gráfico con título y botones de zoom de pantalla completa.data-grid : cuadrícula de datos con la fuente de datos remoto que utiliza tablas de arranque.modal : envoltura para el modal de arranque.multiselect : múltiples desplegables Seleccione con búsqueda y desplazamiento virtual.offcanvas - Wrapper para el bootstrap OffCanvas.pager - Bootstrap Pager que funciona con la red de datos.placeholder : cargando marcador de posición basado en el marcador de posición Bootstrap, utilizado principalmente por otros componentes para administrar un estado no inicializado.search-input : entrada de búsqueda simple con un icono de búsqueda que maneja los tiempos de espera de búsqueda y evita múltiples solicitudes de búsqueda.Para ver ejemplos de uso para estos componentes, consulte este proyecto.
Siga estos pasos para construir y ejecutar la aplicación de demostración de RazorsVelte:
Descargue DockerFile de https://raw.githubusercontent.com/vb-consulting/razorsvelte/master/dockerfile (o simplemente ejecute wget https: // raw.githubusercontent.com/vb-consulting/razorsvelte/master/dockerfile` del indicador del comentario)
Abra un símbolo del sistema y navegue a la carpeta donde guardó DockerFile
Ejecute los siguientes comandos:
docker build -t razorsvelte . docker run --rm -it -p 5000:80 --name razorsvelte razorsvelte:latest
Nota:
Si intenta iniciar sesión con un proveedor externo, será redirigido a la página de error. Edite
appsettings.jsoncon su propio ID de proveedor de clientes y secretos del cliente y asegúrese de que la aplicación OAuth redirige a `localhost: 5000`` - para habilitar esta función.
/ : Página de índice - Mostrar valor de accesorios externos Hello world from svelte y Muestra enlaces útiles/privacy - Página de muestra de privacidad, muestra el título de H1 en una página de Svelte que se pasa desde Razor Page ViewData./login - Mostrar botones de inicio de sesión externos/authorized - Muestra de página autorizada protegida con el atributo Authorize . Muestra datos de usuario autorizados simples pasados de la página Razor./401 - Muestra la página no autorizada que redirige cuando un usuario no autorizado intenta acceder a la página con el atributo Authorize ./404 - No se encuentra página para rutas de servidor desconocidas./spa Ejemplo de la aplicación de una sola página (SPA) con el componente de enrutador de cliente hashtag que muestra varias rutas de forma de spa.Notas importantes:
wwwroot y normalmente puede importarlos a páginas de afeitar (o cualquier otra página).Svelte es un nuevo enfoque radical para construir interfaces de usuario.
Mientras que los marcos tradicionales como React y Vue hacen la mayor parte de su trabajo en el navegador, las eslvas cambian que funcionan en un paso de compilación que ocurre cuando construye su aplicación. En lugar de utilizar técnicas como Virtual DOM Diffing, Svelte escribe un código que actualiza quirúrgicamente el DOM cuando cambia el estado de su aplicación.
Svelte es un compilador que produce una salida de JavaScript pequeña y muy optimizada.
Svelte también envuelve su marcado en la salida del compilador, que es aún más pequeño de lo que sería el marcado normal.
La salida del compilador SVELTE se almacena en caché en el navegador, lo que hace que cada solicitud posterior sea aún más rápida ya que el navegador ni siquiera tiene que descargar ese marcado nuevamente.
Como Svelte produce JavaScript puro de vainilla, no hay sobrecarga de tiempo de ejecución. Esto también significa que puede importar y agrupar (con rollup) y el marco de tiempo de ejecución que podría necesitar, tal vez para reutilizar los antiguos componentes de la interfaz de usuario que pueda tener. Por ejemplo, el código heredado con jQuery.
Svelte se ha convertido en el marco web más querido para los desarrolladores en un año 2021, según la encuesta de Stackoverflow.
El acurrucado ya está preconfigurado para ejecutarse con el proyecto ASP.NET, compilar, agrupar y eliminar módulos no utilizados, y luego salga a su wwwroot de su proyecto ASP.NET.
También puede continuar usando las páginas normales de Razor ASP.NET (o MVC) como lo haría normalmente.
El resultado es una aplicación web **** optimizada ** *** con:
Y, puede combinar la representación del lado del servidor con una representación frontal de SVVELTE optimizada.
Lo mejor de todo: puede evitar la configuración tediosa utilizando esta plantilla.
$ 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
El ejemplo de jQuery solo tiene una página que demuestra cómo usar jQuery con eslte y rollup.
$ npx degit vb-consulting/RazorSvelte#jquery
> cloned vb-consulting/RazorSvelte#jquery
$ cd RazorSvelte
$ npm install
...
$ dotnet run
Nota:
degit simplemente descarga y descomprime la última versión del contenido de un repositorio de Git sin inicialización del repositorio (a diferencia git clone , por ejemplo).Simplemente haga clic en el botón Green Big Use esta plantilla .
Si desea alguna otra plantilla en lugar de la plantilla principal (como el ejemplo de jQuery o Net5), cambie primero la rama.
Cada página de Razor tiene dos nuevos archivos anidados:
MyPage.rollup.config.js - Archivo de configuración enrollable para esta página.MyPage.entry.ts - Archivo del módulo TypeScript de punto de entrada para esta página.Nota:
MyPage.cshtml (a través de la configuración del archivo de proyecto) para que IDES como VisualStudio y JetBrains Rider los aniden visualmente.*.cshtml y un valor de ${basename}.cshtml.cs, ${basename}.entry.ts, ${basename}.rollup.config.js . El archivo de configuración importa la configuración global de Scripts/rollup. configurar y establece los siguientes valores:
wwwroot /build plus entry module name with the extensión JS`).wwwroot /build plus entry module name with la extensión CSS`.Ver páginas de muestra en este repositorio.
El módulo de entrada TypeScript importa un archivo SVelte para esta página y devuelve la aplicación SVELTE.
En esta plantilla, todos los ejemplos usan document.body como objetivo de aplicación. Eso significa que las Pages/Shared/_Layout.cshtml solo contienen un cuerpo.
El contenido del cuerpo es representado por la página de afeitar en sí y el componente svelte .
Cada página de Razor habilitado para SVELTE también debe incluir un salto JavaScript y CSS (si lo hay), por ejemplo, para la página de índice:
@section HeadSection {
< link href = " ~/build/index.css " asp-append-version = " true " rel = " stylesheet " />
< script defer src = " ~/build/index.js " asp-append-version = " true " ></ script >
} Todos los componentes SVVEL y módulos adicionales están en App separada Dir.
Cada componente de archivo svelte en una raíz es utilizado por la página de afeitar asociada como se describió anteriormente. Cada uno de ellos representará el encabezado, la sección principal y el pie de página en este ejemplo.
Eso significa que la mayoría del marcado es producido por el compilador SVELTE en un solo archivo JavaScript, para cada página, con un tamaño promedio de alrededor de 18 kb.
La representación es instantánea y la salida JS se almacena en caché en el cliente para reducir el tamaño de descarga.
Comandos de Dotnet para usar con Scripts NPM Extensiones UI (Ejecute desde su IDE):
dotnet-run para dotnet run .dotnet-clean : para dotnet clean .dotnet-build : para dotnet build .Soporte de estilo SCSS
fe-scss-build : crea archivos CSS globales wwwroot/style.css en formato comprimido a partir de archivos SCSS App/scss/style.scss que importa.fe-scss-watch : construir archivos CSS globales wwwroot/style.css en formato sin comprimir a partir de archivos SCSS App/scss/style.scss que importa y se mantiene en un modo recursivo de reloj. Crear soporte para la página de Index
fe-build : crea JavaScript para la página de Index . La salida es wwwroot/build/index.js en un formato comprimido sin ningún mapas de origen. El archivo JavaScript no se puede depurar. Esto es para la producciónfe-watch : crea JavaScript para la página de Index . La salida es wwwroot/build/index.js en un formato sin comprimir con los mapas de origen. El archivo JavaScript se puede depurar. Esto no es para la producción. El proceso seguirá monitoreando los cambios de archivo y reconstruirá en consecuencia. Esto es útil para el proceso de desarrollo. Nota: Para construir o ver otras páginas, puede usar esta línea de comando npm run fe-build <page> o npm run fe-build <page> , donde el nombre de la página es un archivo de configuración en minúsculas sin extensiones. Por ejemplo, index para ./Pages/Index.rollup.config.js , login para ./Pages/Login.rollup.config.js , etc.
Todas las páginas
fe-build-all : Frontend Build-All. Llama Scripts/build-all.js script para construir y compilar todas las páginas y todas las hojas de estilo.fe-watch-all: Frontend watch-all. Calls scripts/watch-all.js` script para construir, compilar y ver todas las páginas y todas las hojas de estilo.Otro:
npm-upgrade : actualiza todas las dependencias de NPM a la última versión. Use esto con precaución. Para poder ejecutar este comando, se requiere la dependencia global npm-check-updates . Use npm install -g npm-check-updates para instalar.code : Abre una instancia de Código Visual Studiobuild-urls : invoca el script .NET C# que crea automáticamente el archivo shared/urls.ts que contiene todas las URL de la aplicación. Construye backend, ejecuta el comando de script y existe. Este comando utilizará la tecla de configuración de UrlBuilderPath .build-models : invoca el script .NET C# que crea automáticamente el archivo shared/models.d.ts que contiene todas las interfaces de modelo desde el espacio de nombres del modelo. Construye backend, ejecuta el comando de script y existe. Este comando creará un archivo TypeScript establecido en la clave de configuración TsModelsFilePath ( shared/models.d.ts ) que contendrá todas las clases públicas de C# traducidas a interfaces de TypeScript, que están presentes en el espacio de nombres bajo la clave de configuración ModelNamespace ( RazorSvelte.SampleData ). Sí.
Puede usar la consola de depuración de su navegador para la depuración como lo haría normalmente. JavaScript debe tener un archivo .map asociado.
Para crear un archivo .map , ejecute el archivo rollup y Configuración como comandos de argumento con -w Switch. Por ejemplo:
rollup -c ./Pages/Index.cshtml.js -w
Este comando crea un archivo wwwroot/build/index.js sin comprimir con un mapa asociado que permite la depuración en su navegador.
En la pestaña Fuentes de su navegador, verá su archivo typeScript App/index.svetle que puede depurar normalmente.
Además, este comando continuará observando sus archivos fuente y se construirá de manera incremental a medida que continúe cambiándolo.
Sí.
No use el comando "construir todo". En su lugar, use la construcción incremental como se describió anteriormente en la pregunta anterior.
No, no necesita un servidor externo.
Este proyecto utiliza un servidor web .NET incorporado.
Sin embargo, deberá tener NodeJS y NPM instalados para ejecutar comandos enrollables.
Tendrá que crear una aplicación de inicio de sesión en estos servicios para recuperar la ID del cliente y los valores secretos del cliente y pegarlos a los archivos de configuración.
Consulte AppSettings.json para obtener más detalles.
Una vez que se aprueba la autorización de proveedores externos, la aplicación utilizará Auth JWT para identidades ya confirmadas por los proveedores externos. Por lo tanto, tendrá que configurar una JwtConfigSection con los valores:
Secret - Cadena aleatoria secreta largaIssuer - JWT Token EmisorAudience - Audiencia token JWTExpirationMin - tiempo de vencimiento de tokens JWT en minutosClockSkewMin : se suma al tiempo de vencimiento de token JWT, establecido en NULL para evitar.RefreshTokenExpirationMin - Actuar las actas de vencimiento del token. Establecer en NULL para evitar usar tokens de actualización. Si se usa, debe ser más largo que el vencimiento del token para entrar en vigencia.CookieExpirationMin - Vestimato de galletas en minutos. Debe ser más largo que la expiración del token o actualizar el vencimiento del token si se usa.CookieName - Nombre de la cookie de seguridad. Nota: Si usa la opción de actualización de token, es posible que desee volver a implementar la clase de RefreshTokenRepository para usar la base de datos o algún tipo de caché permanente, en lugar de un diccionario en memoria.
El enrutamiento de la página todavía es manejado en el servidor ASP.NET Web. Eso significa que este proyecto no es una aplicación de una sola página (SPA), aunque todo el marcado está contenido en la salida SVELTE, lo que significa que se almacena en caché en el cliente de manera SPA.
Sin embargo, una de las rutas /spa del servidor es un ejemplo de la aplicación SPA. Esta página utiliza svelte-spa-router y muestra varias vistas de spa con las rutas hashtag.
Sí, por ejemplo, mediante el uso de entradas ocultas.
<input id="title" type="hidden" value="@ViewData["Title"]" /> en su página. import { getValue } from "./shared/config" ;
let title = getValue < string > ( "title" ) ;Además de ser mucho más fácil y más rápido de desarrollar y mantener, sí, es más rápido. Todo el marcado está contenido y minificado dentro de los archivos JavaScript compilados de los componentes SVVELTE que luego se descargan la primera vez y luego almacenan en caché para cada nueva solicitud.
Esto reduce significativamente el tráfico de red para su aplicación.
El marcado se representa instantáneamente cuando se carga la página.
Copyright (c) Vedran Bilopavlović - VB Consulting y VB Software 2022 Este código fuente tiene licencia bajo la licencia MIT.
