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

1.HelloFront

BoilerplateSCSS/PUG/ES6forcleanandfastFront-endproject.

Démo:https://hellofront.netlify.com/

Workonsrc/folderandgulpbuildindist/.

1.HelloFront1.1.Installation1.1.1.Nodeversionmanager1.1.2.InstallSass1.1.3.InstallYarn1.1.4.InstallGulp1.1.5.DownloadthedependenciesNPM1.1.6.InstallTooling1.2.Commands1.2.1.Runproject1.2.2.Buildproject1.2.3.OptimizeSVG1.2.4.Cleanproject1.3.Howitworks1.3.1.WorkswithSCSS1.3.2.WorkswithPugtemplating1.3.3.WorkswithJavaScript1.3.4.WorkingwithImages1.3.5.WorkingwithFonts1.3.6.WorkingwidthSVGSprite1.1.Installation1.1.1.Nodeversionmanager

InstallNVM

nvmuse1.1.2.InstallSass

Gotosass-lang.com/installforinstallationincommandline.

1.1.3.InstallYarn

Gotohttps://yarnpkg.com/docs/install

1.1.4.InstallGulp

Gotohttps://gulpjs.com/

1.1.5.DownloadthedependenciesNPMyarninstall1.1.6.InstallTooling

UsePrettierforcleanyourJS/SCSSfiles.

PluginforIDE:

VisualCodeStudioAtomSublimetext1.2.Commands1.2.1.Runprojectyarndev1.2.2.Buildprojectyarnbuild1.2.3.OptimizeSVGyarnsvg1.2.4.Cleanprojectyarnreset1.3.Howitworks1.3.1.WorkswithSCSS

Useatomicdesigndesignfororgaznisecomponents

TheSCSSfilesarelocatedin./src/assets/scss.

ExampleSCSShierarchy:

base/:UnclassedHTMLelements(typeselector)atoms/:Atomsarethebasicbuildingblocksofmatter(button,input,etc.)molecules/:Moleculesaregroupsofatomsbondedtogetherandarethesmallestfundamentalunitsofacompound(from,cards,etc.)layout/:Layoutarethebasicelmentforbuildlayout.page/:Pagesarespecificinstancesoftemplatestools/:Defaultmixinandfunctionsutils/:Helpersandoverrides_settings.scss:Globalvariablesapp.scss:Mainstylesheet

UsetheBEMnammingconvention.

1.3.2.WorkswithPugtemplating

ThePUGfilesarelocatedin./src/template

layout:layoutofhtmlfilesgeneratedmixin:forreusablepatternpages:thecontentofhtmlfilesgeneratedpartial:includesofhtmlpatternconfig.pug:globalvariables1.3.3.WorkswithJavaScript

TheJavascriptfilesarelocatedin./src/assets/js.

UsetheES6syntaxeBabelconvertitinES5foryouviawebpack.

1.3.4.WorkingwithImages

TheImagefilesarelocatedin./src/assets/img

Acceptedfileformats:-jpg-png-gif-svg

1.3.5.WorkingwithFonts

Thefontfilesarelocatedin./src/assets/font

1.3.6.WorkingwidthSVGSprite

Thesvgfilesforspritearelocatedin./src/assets/icons.

Uncommenttheline11ofthefile./src/template/layout/base.pugtoincludetheminthebasiclayout.

APUGmixinisplannedforuse:

+icon('name-of-file','my-css-class')

helloFront Boilerplate SCSS / PUG / ES6

作品详情

重点城市程序员兼职推荐

重点岗位程序员兼职推荐