mpa frontend template

MPA-Frontend-Vorlage

Einfache Vorlage basierend auf Webpack, Pug, Stylus, ES6, PostCSS für mehrseitige Anwendungen

Rückmeldung

Für Fragen, Fehler und Verbesserungen verwenden Sie Issues.

Vorbereiten

Erforderlich

1. Node.js installieren oder aktualisieren;
2. Yarn installieren – schneller Paketmanager (wie ein NPM), Verwendung.

Optional

1. Installieren Sie das Editorconfig-Plugin für Ihren Editor (PhpStorm, Sublime Text, Atom, VS Code) – konsistenter Codierungsstil zwischen verschiedenen Editoren und IDEs;
2. Installieren Sie das eslint-Plugin für Ihren Editor (PhpStorm, Sublime Text, Atom, VS Code) – das steckbare Linting-Dienstprogramm für JavaScript.

Start

1. Projekt klonen oder herunterladen:

    git clone [email protected]:evgen3/mpa-frontend-template.git your-project-name
   

2. Geben Sie in den Projektordner ein und entfernen Sie den .git-Ordner:

    cd your-project-name && rm -rf .git
   

3. Abhängigkeiten mit Garn installieren:

    yarn
   

4. Verwenden Sie Build-Befehle:
   • yarn build – Build-Projekt für die Produktion (einschließlich UglifyJSPlugin, cssnano);
   • yarn watch – Erstellen und mit der Überwachung der Entwicklung beginnen (einschließlich Quellkarten);
   • yarn start – Erstellen, Überwachen und lokaler Server für die Entwicklung (einschließlich Neuladen bei Änderungsdateien);
   • yarn lint – Lint-JS-Code im SRC-Ordner mit Airbnb-Regeln.

Kochbuch

Bild in Vorlage einbinden

In der Datei pug/includes/require.pug befindet sich die Funktion, Verwendung:

img ( src = 'upload/sample.jpg' srcset = ` upload/[email protected] 2x ` alt = '' )
.block ( style = 'background-image: url(upload/sample.jpg);' )

Kurz gesagt, in die Datei pug/mixins/img.pug eingebundenes Mixin, Verwendung:

 + img( 'sample.jpg' ) ( alt = 'image' ) .some-class

Aufmerksamkeit! Dieses Mixin erfordert ein Bild in doppelter Größe (für srcset) und der Link ist bereits upload/ Verzeichnis enthalten.

Fügen Sie Plugins/Bibliotheken hinzu

CSS

Abhängigkeit installieren (z. B. Swiper):

 yarn add swiper

Abhängigkeit einmal in main.styl importieren:

 @require '~swiper/dist/css/swiper.css'

Das Symbol ~ im Stil zeigt auf einen Ordner „node_modules“.

JS

jQuery-Plugins

Abhängigkeit installieren (z. B. Sticky-Kit):

 yarn add sticky-kit

Importieren Sie die Abhängigkeit einmal in main.js:

 import 'sticky-kit/dist/sticky-kit' ; 

Andere Bibliotheken

Abhängigkeit installieren (z. B. Swiper):

 yarn add swiper

Importieren Sie die Datei, in der Sie die Abhängigkeit benötigen:

 import Swiper from 'swiper/dist/js/swiper' ;

Alias ​​@ in Stylus und js

@ im Pfad zeigt auf den Ordner src, damit können Sie einen absoluten Pfad erstellen. CSS:

 src: url("~@/font/rouble-webfont.woff") format("woff")

JS:

 import module from '@/js/module';

Verwenden von SVG-Sprite

Legen Sie das Symbol im Ordner /ico ab

Und fügen Sie Ihrer Vorlage Code hinzu:

 < svg class =" your-class " width =" 193 " height =" 40 " >
  < use xlink:href =" #your-icon-file-name " > </ use >
</ svg >

Oder Sie können pug-mixin verwenden:

 + icon( 'your-icon-file-name' ) ( width = 193 height = 40 ) .your-class