Téléchargement de vitam - Téléchargement du code source vitam

vitam

Autres catégories

v0.1.5 released

Télécharger

Vitam

Vitam est un modèle de démarrage avec Vite pour les projets frontaux. Ce modèle se concentre sur la création d'un site Web statique et convient à des projets petits et moyens comme une page de destination et un site Web d'entreprise.

Statut

Caractéristiques

HMR rapide avec Vite
Support PWA
Serveur local rapide
Comprimer les actifs d'image
Rompre les petits fichiers HTML avec un guidon
Se référant à CSS durable
Bibliothèques javascript utiles
Fonctions et mélanges SCSS utiles hors de la boîte
Vérifier TypeScript avec Eslint
Validation HTML avec HTML-valider
Styles de transformation avec POSTCSS
Runner de test intégré avec plaisanterie

Exigences

Node V18 (18.13.0)

Principales dépendances

Fil
Plaisanter
Eslint
HTML-Vallider
Plus joli
Vite
Guidon
Manuscrit
Toupet

Comment utiliser

Cloner ce référentiel et installer les dépendances

 yarn install

Commandes disponibles

Démarrez votre projet en mode développement

 yarn start

Construisez votre projet de production

 yarn build

Build de production de prévisualisation localement

 yarn serve

Valider les fichiers HTML

 yarn htmlValidate

Lint vos fichiers de projet

 yarn lint

Corrigez vos fichiers de projet

 yarn lint:fix

Installer des dactylographies de type manquantes

 yarn postInstall

Vérifiez la licence du package

 yarn checkLicense

Tester le code du projet

 yarn test

 yarn test:watch

Html

Vous pouvez gérer plusieurs fichiers HTML avec des barreaux Vite-Plugin. Assurez-vous que le contexte du guidon dont vous avez besoin.

Si vous souhaitez utiliser plusieurs fichiers partiels, ajoutez vos fichiers partiels dans le dossier _partials .

src/_partials

Vous pouvez appeler des fichiers partiels directement par d'autres modèles comme cet exemple.

 {{> _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 gère les informations de base du site. Vous devez modifier site.config.ts lorsque vous créez une nouvelle page.

 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 ,
  } ,
} ;

Apprendre le guidon

Sass (Dart Sass)

Vous pouvez gérer logiquement les feuilles de style avec SASS. J'ai déjà défini certaines fonctions et mixins. Consultez ces fichiers avant de commencer votre projet.

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

Apprendre le sass

Architecture CSS

Ce modèle de démarrage vous donne une architecture CSS qui durcit le CSS standard, mais ce n'est pas l'architecture nécessaire dans tous les projets. Je vous recommande de présenter la meilleure architecture de chaque projet.

Apprendre l'architecture CSS

Qu'est-ce qui durcit CSS?

Le CSS durable est une architecture pour écrire des feuilles de style pour des projets Web à grande échelle et à l'échelle rapide. Vous pouvez obtenir ces avantages de la dure CSS.

Styles isolés et auto-qualifiés
Échelle à n'importe quelle taille
Éviter l'abstraction et la spécificité
Un sélecteur clé pour les gouverner tous
État de manutention

Apprendre le CSS durable

Comment écrire des sélecteurs CSS durables

Voici l'exemple de sélecteur.

 .namespace-Component_ChildNode

Manuscrit

Ce modèle prend en charge TypeScript. Il est facile d'importer des fichiers TS. Vous pouvez personnaliser les options de TypeScript avec tsconfig.json à tout moment.

J'ai déjà défini certaines fonctions utilitaires. Consultez ces fichiers avant de commencer votre projet.

src/ts/utils/*.ts

La commande postInstall vous aidera à installer des dactylographiques dans ce projet.

Jest est intégré dans ce projet. Vous pouvez exécuter une plaisanterie à partir de la ligne de commande.

Apprendre dypcript apprendre la plaisanterie

Icônes

Vite-Plugin-SVG-ICONS facilite la gestion des icônes SVG.

Ajoutez des fichiers SVG dans le dossier Icônes.

 src/icons/

Utilisation de SVG Sprite

Appelez l'icône avec ID.

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

Pwa

Vite Plugin PWA prend en charge la création de votre site Web plus rapidement. Éditer vite.config.ts si vous souhaitez personnaliser les paramètres de PWA. Vous pouvez générer des icônes pour PWA avec un générateur Favicon.

Remarque: veuillez remplacer certains fichiers d'actifs pour PWA par les fichiers de votre projet.

Apprendre pwa

Actions github

Si vous utilisez GitHub dans votre projet, vous pouvez profiter des actions GitHub pour automatiser vos workflows de développement. Consultez ce fichier avant de commencer votre projet.

.github/workflows/project-ci.yml