vitam Download - vitam Source Code Download

vitam

Andere Kategorien

v0.1.5 released

Herunterladen

Vitam

Vitam ist eine Startervorlage mit vite für Front-End-Projekte. Diese Vorlage konzentriert sich darauf, eine statische Website zu erstellen, und passt zu kleinen bis mittleren Projekten wie einer Zielseite und einer Unternehmenswebsite.

Status

Merkmale

Schneller HMR mit vite
PWA -Unterstützung
Schneller lokaler Server
Komprimieren von Bildanlagen
HTML -kleinere Dateien mit Lenker brechen
Bezieht sich auf dauerhafte CSS
Aus dem Feld nützliche JavaScript -Bibliotheken
Aus dem Box nützliche SCSS -Funktionen und Mixins
Überprüfen Sie das Typenkript mit Eslint
HTML-Validierung mit HTML-Validat
Transformationsstile mit Postcss
Eingebauter Testläufer mit Scherz

Anforderungen

Knoten v18 (18.13.0)

Hauptabhängigkeiten

Garn
Scherz
Eslint
Html-vallidat
Hübscher
Vite
Lenker
Typoskript
Sass

Wie man benutzt

Klonen Sie dieses Repository und installieren Sie Abhängigkeiten

 yarn install

Verfügbare Befehle

Starten Sie Ihr Projekt im Entwicklungsmodus

 yarn start

Bauen Sie Ihr Projekt zur Produktion auf

 yarn build

Lokal Vorschau -Produktionsaufbau

 yarn serve

Validieren Sie HTML -Dateien

 yarn htmlValidate

FININT IHRE PROJEKTENDATEN

 yarn lint

Beheben Sie Ihre Projektdateien

 yarn lint:fix

Installieren Sie fehlende Typierungen für Typscript -Typen

 yarn postInstall

Überprüfen Sie die Lizenz des Pakets

 yarn checkLicense

Code des Testprojekts

 yarn test

 yarn test:watch

Html

Sie können mehrere HTML-Dateien mit vite-Plugin-Handlebern abwickeln. Stellen Sie sicher, dass der Lenkerkontext nach benötigtem Kontext ist.

Wenn Sie mehrere Teildateien verwenden möchten, fügen Sie Ihre Teildateien in den Ordner _partials hinzu.

src/_partials

Sie können Teildateien direkt nach anderen Vorlagen wie diesem Beispiel aufrufen.

 {{> _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 verwaltet die grundlegenden Informationen der Website. Sie müssen site.config.ts bearbeiten, wenn Sie eine neue Seite erstellen.

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

Lernbaum lernen

Sass (Dart Sass)

Sie können stilvoller Laken logisch mit SASS verwalten. Ich habe bereits einige Funktionen und Mixins definiert. Schauen Sie sich diese Dateien an, bevor Sie mit Ihrem Projekt beginnen.

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

Lerne Sass

CSS -Architektur

Diese Starter -Vorlage bietet Ihnen eine CSS -Architektur, die CSS standardmäßig erfolgt, aber in allen Projekten keine erforderliche Architektur. Ich empfehle Ihnen, die beste Architektur in jedem Projekt vorzustellen.

Lernen Sie CSS -Architektur

Was ist dauerhaft CSS?

Enduring CSS ist eine Architektur, um Stilblätter für groß angelegte, sich schnell verändernde, langlebige Webprojekte zu schreiben. Sie können diese Vorteile durch dauerhafte CSS erhalten.

Isolierte, selbstquadlerische Stile
Skalierung zu jeder Größe
Abstraktion und Spezifität vermeiden
Ein wichtiger Selektor, um sie alle zu regieren
Handlingszustand

Lernen Sie dauerhaftes CSS

So schreiben Sie dauerhafte CSS -Selektoren

Hier ist der Beispielauswahl.

 .namespace-Component_ChildNode

Typoskript

Diese Vorlage unterstützt TypeScript. Es ist einfach, TS -Dateien zu importieren. Sie können die Optionen von TypeScript jederzeit mit tsconfig.json anpassen.

Ich habe bereits einige Dienstprogrammfunktionen definiert. Schauen Sie sich diese Dateien an, bevor Sie mit Ihrem Projekt beginnen.

src/ts/utils/*.ts

Der Befehl postInstall hilft Ihnen bei der Installation von Typierungen in diesem Projekt.

Scherz ist in diesem Projekt eingebaut. Sie können Scherz aus der Befehlszeile ausführen.

Lernen Sie Typenkript lernen Scherz lernen

Ikonen

Vite-Plugin-SVG-ICons machen es einfach, SVG-Symbole zu verwalten.

Fügen Sie SVG -Dateien in den Icons -Ordner hinzu.

 src/icons/

Verwendung von SVG Sprite

Rufen Sie das Symbol mit ID an.

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

PWA

Vite Plugin PWA unterstützt Ihre Website schneller. Bearbeiten Sie vite.config.ts Wenn Sie Einstellungen für PWA anpassen möchten. Sie können Symbole für PWA mit Favicon -Generator erzeugen.

Hinweis: Bitte ersetzen Sie einige Asset -Dateien für PWA durch die Dateien Ihres Projekts.

PWA lernen

Github -Aktionen

Wenn Sie GitHub in Ihrem Projekt verwenden, können Sie GitHub -Aktionen nutzen, um Ihre Entwicklungsworkflows zu automatisieren. Schauen Sie sich diese Datei an, bevor Sie mit Ihrem Projekt beginnen.

.github/workflows/project-ci.yml