Descarga vitam - Descarga del código fuente vitam

vitam

Otras categorias

v0.1.5 released

Descargar

Vitam

Vitam es una plantilla de inicio con VITE para proyectos front-end. Esta plantilla se centra en construir un sitio web estático y se adapta a proyectos pequeños a medios como una página de destino y un sitio web corporativo.

Estado

Características

HMR rápido con VITE
Soporte de PWA
Servidor local rápido
Activos de imagen de comprimir
Romper los archivos más pequeños HTML con manillar
Refiriéndose a CSS duradero
Bibliotecas útiles de JavaScript de fuera de la caja
Funciones y mezclas de SCSS útiles fuera de la caja
Verificación de mecanografiado con Eslint
Validación HTML con HTML-Validato
Transformando estilos con postcss
Runner de prueba incorporado con broma

Requisitos

Nodo V18 (18.13.0)

Dependencias principales

Hilo
Broma
Eslint
HTML-VALIDATE
Más bonito
Vite
Bigote daliniano
Mecanografiado
Hablar con descaro a

Cómo usar

Clon este repositorio e instalación de dependencias

 yarn install

Comandos disponibles

Inicie su proyecto en modo de desarrollo

 yarn start

Construya su proyecto para la producción

 yarn build

Construcción de producción de vista previa local

 yarn serve

Validar archivos HTML

 yarn htmlValidate

Pase el archivo de sus archivos de proyecto

 yarn lint

Arregle los archivos de su proyecto

 yarn lint:fix

Instale tipificaciones de mecanografías faltantes

 yarn postInstall

Verifique la licencia del paquete

 yarn checkLicense

Prueba el código del proyecto

 yarn test

 yarn test:watch

Html

Puede manejar la agrupación de múltiples archivos HTML con Vite-Plugin-HandleBars. Asegúrese de que el contexto del manillar sea como necesite.

Si desea usar múltiples archivos parciales, agregue sus archivos parciales a la carpeta _partials .

src/_partials

Puede llamar a archivos parciales directamente por otras plantillas como este ejemplo.

 {{> _header }}
  <main>
    <h1>Welcome to VITAM Docs!</h1>
    <p>VITAM is a front-end template with Vite for static websites.</p>
  </main>
{{> _footer }}

site.config.ts administra la información básica del sitio. Debe editar site.config.ts cuando crea una nueva página.

 const pagesData = {
  '/sample/index.html' : {
    locale : siteData . locale ,
    title : `Smaple Page | ${ siteData . siteName } ` ,
    description : `This is a sample page. ${ siteData . description } ` ,
    url : ` ${ siteData . url } /sampple/` ,
    ogpImage : siteData . ogpImage ,
    ogType : 'article' ,
    fbAppId : siteData . fbAppId ,
    fbAdmins : siteData . fbAdmins ,
    twitterCard : siteData . twitterCard ,
    twitterSite : siteData . twitterSite ,
  } ,
} ;

Aprender el manillar

Sass (Dart Sass)

Puedes administrar hojas de estilo lógicamente con Sass. Ya he definido algunas funciones y mezclas. Consulte estos archivos antes de comenzar con su proyecto.

src/scss/foundation/functions/*.scss
src/scss/foundation/mixins/*.scss

Aprender sass

Arquitectura CSS

Esta plantilla de inicio le ofrece una arquitectura CSS que está durando CSS estándar, pero no es una arquitectura necesaria en todos los proyectos. Le recomiendo que presente la mejor arquitectura en cada proyecto.

Aprender arquitectura CSS

¿Qué es CSS duradero?

Durante CSS es una arquitectura para escribir hojas de estilo para proyectos web a gran escala, cambio rápido y de larga vida. Puede obtener estos beneficios de durar CSS.

Estilos aislados y cuantinadores
Escala a cualquier tamaño
Evitar la abstracción y la especificidad
Un selector de clave para gobernarlos a todos
Estado de manejo

Aprenda CSS duradero

Cómo escribir selectores CSS duraderos

Aquí está el selector de ejemplo.

 .namespace-Component_ChildNode

Mecanografiado

Esta plantilla admite TypeScript. Es fácil importar archivos TS. Puede personalizar las opciones de TypeScript con tsconfig.json en cualquier momento.

Ya he definido algunas funciones de utilidad. Consulte estos archivos antes de comenzar con su proyecto.

src/ts/utils/*.ts

El comando postInstall lo ayudará a instalar tipificaciones en este proyecto.

Jest está incorporado en este proyecto. Puedes ejecutar broma desde la línea de comando.

Aprender mecanografiar jest de aprender

Íconos

VITE-Plugin-SVG-icons facilita la gestión de los iconos SVG.

Agregue archivos SVG a la carpeta de iconos.

 src/icons/

Uso de SVG Sprite

Llame al icono con ID.

 < svg aria-hidden =" true " >
  < use href =" #icon-file " />
</ svg >

PWA

Vite Plugin PWA admite hacer que su sitio web sea más rápido. Edite vite.config.ts si desea personalizar la configuración para PWA. Puede generar iconos para PWA con Favicon Generator.

Nota: Reemplace algunos archivos de activos para PWA con los archivos de su proyecto.

Aprender PWA

Acciones de Github

Si usa GitHub en su proyecto, puede aprovechar las acciones de GitHub para automatizar sus flujos de trabajo de desarrollo. Consulte este archivo antes de comenzar con su proyecto.

.github/workflows/project-ci.yml