mpa frontend template

Modèle d'interface MPA

Modèle simple basé sur webpack, carlin, stylet, es6, postcss pour les applications multi-pages

Retour

Pour les questions, les bugs et les améliorations, utilisez les problèmes.

Préparer

Requis

1. Installez ou mettez à jour Node.js ;
2. Installez Yarn - gestionnaire de paquets rapide (comme un npm), utilisation.

Facultatif

1. Installez le plugin editorconfig pour votre éditeur (PhpStorm, Sublime Text, Atom, VS Code) - style de codage cohérent entre les différents éditeurs et IDE ;
2. Installez le plugin eslint pour votre éditeur (PhpStorm, Sublime Text, Atom, VS Code) - l'utilitaire de peluchage enfichable pour JavaScript.

Commencer

1. Cloner ou télécharger le projet :

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

2. Entrez dans le dossier du projet et supprimez le dossier .git :

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

3. Installez les dépendances avec du fil :

    yarn
   

4. Utilisez les commandes de build :
   • yarn build - projet de construction pour la production (inclut UglifyJSPlugin, cssnano) ;
   • yarn watch - construisez et commencez à surveiller le développement (inclut les sourcesmaps) ;
   • yarn start - construction, surveillance et serveur local pour le développement (inclut le rechargement sur les fichiers de modification) ;
   • yarn lint - code lint js dans le dossier src avec les règles airbnb.

Livre de cuisine

Inclure l'image dans le modèle

Dans le fichier pug/includes/require.pug, fonction située, utilisation :

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

Pour faire court, inclure dans le fichier pug/mixins/img.pug situé mixin, utilisation :

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

Attention! Ce mixin nécessite une image de taille double (pour srcset) et le lien est déjà inclus dans le répertoire upload/ .

Inclure les plugins/bibliothèques

CSS

Dépendance d'installation (par exemple, swiper) :

 yarn add swiper

Importez la dépendance dans main.styl une fois :

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

Le symbole ~ dans le style pointe vers un dossier node_modules.

JS

plugins jQuery

Dépendance d'installation (par exemple, sticky-kit) :

 yarn add sticky-kit

Importez la dépendance dans main.js une fois :

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

Autres bibliothèques

Dépendance d'installation (par exemple, swiper) :

 yarn add swiper

Importez dans le fichier dans lequel vous avez besoin de la dépendance :

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

Alias ​​@ dans stylet et js

@ in path pointe vers le dossier src, avec lui, vous pouvez créer un chemin absolu. CSS :

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

JS :

 import module from '@/js/module';

Utiliser le sprite SVG

Mettez l'icône dans le dossier /ico

Et ajoutez du code dans votre modèle :

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

Ou vous pouvez utiliser pug-mixin :

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