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) - ยูทิลิตี้ Linting แบบเสียบได้สำหรับ 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. ใช้คำสั่ง build:
   • yarn build - สร้างโครงการเพื่อการผลิต (รวมถึง UglifyJSPlugin, cssnano)
   • yarn watch - สร้างและเริ่มดูการพัฒนา (รวมถึงซอร์สแมป)
   • yarn start - สร้าง ดู และเซิร์ฟเวอร์ภายในเครื่องสำหรับการพัฒนา (รวมถึงการรีโหลดไฟล์การเปลี่ยนแปลง)
   • yarn lint - โค้ด lint js ในโฟลเดอร์ 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 ที่อยู่ใน mixin การใช้งาน:

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

ความสนใจ! มิกซ์อินนี้ต้องการรูปภาพในขนาดสองเท่า (สำหรับ srcset) และลิงก์นั้นรวม upload/ ไดเร็กทอรีไว้แล้ว

รวมปลั๊กอิน/ไลบรารี

ซีเอสเอส

ติดตั้งการพึ่งพา (เช่น Swiper):

 yarn add swiper

นำเข้าการพึ่งพาใน main.styl หนึ่งครั้ง:

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

Symbol ~ ใน styl ชี้ไปที่โฟลเดอร์ node_modules

จส

ปลั๊กอิน 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' ;

นามแฝง @ ใน stylus และ js

@ ในพาธชี้ไปที่โฟลเดอร์ src ซึ่งคุณสามารถสร้างพาธสัมบูรณ์ได้ ซีเอสเอส:

 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