helloFront Boilerplate SCSS / PUG / ES6_系统开发案例-程序员客栈

授权协议
Readme

1.HelloFrot

BoilerplateSCSS/PUG/ES6forcleaadfastFrot-edproject.

Démo:https://hellofrot.etlify.com/

Workosrc/folderadgulpbuildidist/.

1.HelloFrot1.1.Istallatio1.1.1.Nodeversiomaager1.1.2.IstallSass1.1.3.IstallYar1.1.4.IstallGulp1.1.5.DowloadthedepedeciesNPM1.1.6.IstallToolig1.2.Commads1.2.1.Ruproject1.2.2.Buildproject1.2.3.OptimizeSVG1.2.4.Cleaproject1.3.Howitworks1.3.1.WorkswithSCSS1.3.2.WorkswithPugtemplatig1.3.3.WorkswithJavaScript1.3.4.WorkigwithImages1.3.5.WorkigwithFots1.3.6.WorkigwidthSVGSprite1.1.Istallatio1.1.1.Nodeversiomaager

IstallNVM

vmuse1.1.2.IstallSass

Gotosass-lag.com/istallforistallatioicommadlie.

1.1.3.IstallYar

Gotohttps://yarpkg.com/docs/istall

1.1.4.IstallGulp

Gotohttps://gulpjs.com/

1.1.5.DowloadthedepedeciesNPMyaristall1.1.6.IstallToolig

UsePrettierforcleayourJS/SCSSfiles.

PlugiforIDE:

VisualCodeStudioAtomSublimetext1.2.Commads1.2.1.Ruprojectyardev1.2.2.Buildprojectyarbuild1.2.3.OptimizeSVGyarsvg1.2.4.Cleaprojectyarreset1.3.Howitworks1.3.1.WorkswithSCSS

Useatomicdesigdesigfororgazisecompoets

TheSCSSfilesarelocatedi./src/assets/scss.

ExampleSCSShierarchy:

base/:UclassedHTMLelemets(typeselector)atoms/:Atomsarethebasicbuildigblocksofmatter(butto,iput,etc.)molecules/:Moleculesaregroupsofatomsbodedtogetheradarethesmallestfudametaluitsofacompoud(from,cards,etc.)layout/:Layoutarethebasicelmetforbuildlayout.page/:Pagesarespecificistacesoftemplatestools/:Defaultmixiadfuctiosutils/:Helpersadoverrides_settigs.scss:Globalvariablesapp.scss:Maistylesheet

UsetheBEMammigcovetio.

1.3.2.WorkswithPugtemplatig

ThePUGfilesarelocatedi./src/template

layout:layoutofhtmlfilesgeeratedmixi:forreusablepatterpages:thecotetofhtmlfilesgeeratedpartial:icludesofhtmlpattercofig.pug:globalvariables1.3.3.WorkswithJavaScript

TheJavascriptfilesarelocatedi./src/assets/js.

UsetheES6sytaxeBabelcovertitiES5foryouviawebpack.

1.3.4.WorkigwithImages

TheImagefilesarelocatedi./src/assets/img

Acceptedfileformats:-jpg-pg-gif-svg

1.3.5.WorkigwithFots

Thefotfilesarelocatedi./src/assets/fot

1.3.6.WorkigwidthSVGSprite

Thesvgfilesforspritearelocatedi./src/assets/icos.

Ucommetthelie11ofthefile./src/template/layout/base.pugtoicludethemithebasiclayout.

APUGmixiisplaedforuse:

+ico('ame-of-file','my-css-class')

1. Hello Front Boilerplate SCSS / PUG / ES6 for clean and fast Front-end project. Démo : https://...

声明：本文仅代表作者观点，不代表本站立场。如果侵犯到您的合法权益，请联系我们删除侵权资源！如果遇到资源链接失效，请您通过评论或工单的方式通知管理员。未经允许，不得转载，本站所有资源文章禁止商业使用运营!

下载安装【程序员客栈】APP

实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

前往安装

helloFront Boilerplate SCSS / PUG / ES6

技术信息

作品详情

功能介绍

重点城市程序员兼职推荐

重点岗位程序员兼职推荐