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용 플러그형 Linting 유틸리티입니다.

시작

1. 프로젝트 복제 또는 다운로드:

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

2. 프로젝트 폴더에 들어가서 .git 폴더를 제거하십시오.

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

3. Yarn을 사용하여 종속성을 설치합니다.

    yarn
   

4. 빌드 명령을 사용하십시오.
   • yarn build - 프로덕션용 빌드 프로젝트(UglifyJSPlugin, cssnano 포함)
   • yarn watch - 개발을 빌드하고 관찰하기 시작합니다(소스맵 포함).
   • yarn start - 개발을 위한 빌드, 감시 및 로컬 서버(변경 파일에 대한 다시 로드 포함)
   • yarn lint - airbnb 규칙을 사용하는 src 폴더의 lint js 코드입니다.

자세한 해설서

템플릿에 이미지 포함

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/ 디렉터리에 포함되어 있습니다.

플러그인/라이브러리 포함

CSS

종속성 설치(예: swiper):

 yarn add swiper

main.styl에서 종속성을 한 번 가져옵니다.

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

스타일의 ~ 기호는 node_modules 폴더를 가리킵니다.

JS

jQuery 플러그인

종속성 설치(예: 끈적한 키트):

 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")

JS:

 import module from '@/js/module';

SVG-Sprite 사용

아이콘을 /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