mpa frontend template

Modelo de front-end MPA

Modelo simples baseado em webpack, pug, stylus, es6, postcss para aplicativos de várias páginas

Opinião

Para dúvidas, bugs e melhorias, use problemas.

Preparar

Obrigatório

1. Instale ou atualize o Node.js;
2. Instale o Yarn - gerenciador de pacotes rápido (como um npm), uso.

Opcional

1. Instale o plugin editorconfig para o seu editor (PhpStorm, Sublime Text, Atom, VS Code) - estilo de codificação consistente entre diferentes editores e IDEs;
2. Instale o plugin eslint para o seu editor (PhpStorm, Sublime Text, Atom, VS Code) - o utilitário linting conectável para JavaScript.

Começar

1. Clone ou baixe o projeto:

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

2. Entre na pasta do projeto e remova a pasta .git:

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

3. Instale dependências com fio:

    yarn
   

4. Use comandos de construção:
   • yarn build - projeto de construção para produção (inclui UglifyJSPlugin, cssnano);
   • yarn watch - construa e comece a observar o desenvolvimento (inclui mapas de origem);
   • yarn start - construção, observação e servidor local para desenvolvimento (inclui recarregamento em arquivos de alteração);
   • yarn lint - código lint js na pasta src com regras do airbnb.

Livro de receitas

Incluir imagem no modelo

No arquivo pug/includes/require.pug função localizada, uso:

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

Resumindo, inclua no arquivo pug/mixins/img.pug localizado no mixin, uso:

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

Atenção! Este mixin requer uma imagem em tamanho duplo (para srcset) e o link já está incluído no diretório upload/ .

Incluir plugins/bibliotecas

CSS

Instale a dependência (por exemplo, swiper):

 yarn add swiper

Importe a dependência em main.styl uma vez:

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

O símbolo ~ no estilo aponta para uma pasta node_modules.

JS

Plug-ins jQuery

Instale a dependência (por exemplo, sticky-kit):

 yarn add sticky-kit

Importe a dependência em main.js uma vez:

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

Outras bibliotecas

Instale a dependência (por exemplo, swiper):

 yarn add swiper

Importe o arquivo no qual você precisa da dependência:

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

Alias ​​@ em caneta e js

@ in path aponta para a pasta src, com ele você pode criar um caminho absoluto. CSS:

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

JS:

 import module from '@/js/module';

Usando SVG-Sprite

Coloque o ícone na pasta /ico

E adicione código no seu modelo:

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

Ou você pode usar pug-mixin:

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