mpa frontend template

Templat ujung depan MPA

Template sederhana berdasarkan webpack, pug, stylus, es6, postcss untuk aplikasi multi halaman

Masukan

Untuk pertanyaan, bug dan penyempurnaan gunakan masalah.

Mempersiapkan

Diperlukan

1. Instal atau perbarui Node.js;
2. Instal Yarn - manajer paket cepat (seperti npm), penggunaan.

Opsional

1. Instal plugin editorconfig untuk editor Anda (PhpStorm, Sublime Text, Atom, VS Code) - gaya pengkodean yang konsisten antara editor dan IDE yang berbeda;
2. Instal plugin eslint untuk editor Anda (PhpStorm, Sublime Text, Atom, VS Code) - utilitas linting yang dapat dicolokkan untuk JavaScript.

Awal

1. Kloning atau unduh proyek:

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

2. Masuk ke folder proyek dan hapus folder .git:

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

3. Instal dependensi dengan benang:

    yarn
   

4. Gunakan perintah build:
   • yarn build - proyek pembangunan untuk produksi (termasuk UglifyJSPlugin, cssnano);
   • yarn watch - membangun dan mulai mengawasi pengembangan (termasuk peta sumber);
   • yarn start - membangun, menonton, dan server lokal untuk pengembangan (termasuk memuat ulang file perubahan);
   • yarn lint - kode lint js di folder src dengan aturan Airbnb.

Buku masak

Sertakan gambar dalam templat

Dalam file pug/includes/require.pug terdapat fungsi, penggunaan:

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

Singkatnya sertakan dalam file pug/mixins/img.pug yang terletak mixin, penggunaan:

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

Perhatian! Mixin ini membutuhkan gambar dalam ukuran ganda (untuk srcset) dan link sudah disertakan direktori upload/ .

Sertakan plugin/perpustakaan

CSS

Instal ketergantungan (misalnya, Swiper):

 yarn add swiper

Impor ketergantungan di main.styl satu kali:

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

Simbol ~ dalam gaya menunjuk ke folder node_modules.

JS

plugin jQuery

Instal ketergantungan (misalnya, sticky-kit):

 yarn add sticky-kit

Impor ketergantungan di main.js satu kali:

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

Perpustakaan lainnya

Instal ketergantungan (misalnya, Swiper):

 yarn add swiper

Impor file yang Anda perlukan ketergantungannya:

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

Alias ​​@ dalam stylus dan js

@ di jalur menunjuk ke folder src, dengan itu Anda dapat membuat jalur absolut. CSS:

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

JS:

 import module from '@/js/module';

Menggunakan svg-sprite

Letakkan ikon di folder /ico

Dan tambahkan kode di template Anda:

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

Atau Anda bisa menggunakan pug-mixin:

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