mpa frontend template

Шаблон интерфейса MPA

Простой шаблон на основе webpack, pug, stylus, es6, postcss для многостраничных приложений.

Обратная связь

Для вопросов, ошибок и улучшений используйте вопросы.

Подготовить

Необходимый

1. Установите или обновите Node.js;
2. Установите Yarn — быстрый менеджер пакетов (по типу npm), использование.

Необязательный

1. Установите плагин editorconfig для вашего редактора (PhpStorm, Sublime Text, Atom, VS Code) — согласованный стиль кодирования между различными редакторами и IDE;
2. Установите плагин eslint для своего редактора (PhpStorm, Sublime Text, Atom, VS Code) — подключаемую утилиту линтинга для JavaScript.

Начинать

1. Клонировать или скачать проект:

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

2. Войдите в папку проекта и удалите папку .git:

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

3. Установите зависимости с помощью пряжи:

    yarn
   

4. Используйте команды сборки:
   • yarn build — сборка проекта для производства (включает UglifyJSPlugin, cssnano);
   • yarn watch — создайте и начните следить за разработкой (включая исходные карты);
   • yarn start — сборка, просмотр и локальный сервер для разработки (включает перезагрузку файлов изменений);
   • yarn lint — js-код lint в папке src с правилами airbnb.

Поваренная книга

Включить изображение в шаблон

В файле pug/includes/require.pug находится функция, использование:

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

Для краткости добавьте в файл pug/mixins/img.pug расположенный миксин, используя:

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

Внимание! Для этого миксина требуется изображение двойного размера (для srcset), и ссылка уже включена в каталог upload/ .

Включить плагины/библиотеки

CSS

Установите зависимость (например, swiper):

 yarn add swiper

Импортируйте зависимость в main.styl один раз:

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

Символ ~ в стиле указывает на папку node_modules.

JS

плагины jQuery

Установите зависимость (например, Sticky-Kit):

 yarn add sticky-kit

Импортируйте зависимость в main.js один раз:

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

Другие библиотеки

Установите зависимость (например, swiper):

 yarn add swiper

Импортируйте в файл, в котором вам нужна зависимость:

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

Псевдоним @ в стилусе и js

@ в пути указывает на папку src, с его помощью вы можете создать абсолютный путь. CSS:

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

ЯС:

 import module from '@/js/module';

Использование svg-спрайта

Поместите значок в папку /ico

И добавьте код в свой шаблон:

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

Или вы можете использовать pug-mixin:

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