mpa frontend template

Plantilla de interfaz de MPA

Plantilla simple basada en webpack, pug, stylus, es6, postcss para aplicaciones de varias páginas

Comentario

Para preguntas, errores y mejoras, utilice problemas.

Preparar

Requerido

1. Instalar o actualizar Node.js;
2. Instale Yarn: administrador de paquetes rápido (como npm), uso.

Opcional

1. Instale el complemento editorconfig para su editor (PhpStorm, Sublime Text, Atom, VS Code): estilo de codificación consistente entre diferentes editores e IDE;
2. Instale el complemento eslint para su editor (PhpStorm, Sublime Text, Atom, VS Code): la utilidad linting conectable para JavaScript.

Comenzar

1. Clonar o descargar proyecto:

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

2. Ingrese a la carpeta del proyecto y elimine la carpeta .git:

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

3. Instalar dependencias con hilo:

    yarn
   

4. Utilice comandos de compilación:
   • yarn build : proyecto de construcción para producción (incluye UglifyJSPlugin, cssnano);
   • yarn watch : cree y comience a observar el desarrollo (incluye mapas fuente);
   • yarn start : compilación, observación y servidor local para desarrollo (incluye recarga de archivos de cambios);
   • yarn lint : código lint js en la carpeta src con reglas de Airbnb.

libro de cocina

Incluir imagen en la plantilla

En el archivo pug/includes/require.pug se encuentra la función, uso:

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

Para abreviar, incluya en el archivo pug/mixins/img.pug ubicado en mixin, use:

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

¡Atención! Este mixin requiere una imagen de tamaño doble (para srcset) y el enlace ya está incluido en el directorio upload/ .

Incluir complementos/bibliotecas

CSS

Instalar dependencia (por ejemplo, swiper):

 yarn add swiper

Importe la dependencia en main.styl una vez:

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

El símbolo ~ en estilo apunta a una carpeta node_modules.

js

complementos de jQuery

Instalar dependencia (por ejemplo, sticky-kit):

 yarn add sticky-kit

Importe la dependencia en main.js una vez:

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

Otras bibliotecas

Instalar dependencia (por ejemplo, swiper):

 yarn add swiper

Importe el archivo en el que necesita la dependencia:

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

Alias ​​@ en stylus y js

@ en la ruta apunta a la carpeta src, con ella puedes crear una ruta absoluta. CSS:

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

JS:

 import module from '@/js/module';

Usando svg-sprite

Pon el ícono en la carpeta /ico

Y agregue código en su plantilla:

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

O puedes usar pug-mixin:

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