48 lines
9.8 KiB
HTML
48 lines
9.8 KiB
HTML
<!DOCTYPE html><html lang="en-US"><head><title>Guide - Vite Frontend Starter</title><meta charset="utf-8"><meta name="author" content="Oleksandr Zakandaiev"><meta name="mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vite FrontEnd Starter is a boilerplate kit for easy building modern static web-sites using Vite builder"><meta name="keywords" content="vite,vituum,builder,frontend,starter,boilerplate,kit,twig,html,css,sass,scss,javascript,js,es6,optimized,autoprefixer,404,grid,htaccess,robots.txt,sitemap.xml,favicon"><meta property="og:type" content="website"><meta property="og:locale" content="en_US"><meta property="og:url" content=""><meta property="og:title" content="Guide - Vite Frontend Starter"><meta property="og:description" content="Vite FrontEnd Starter is a boilerplate kit for easy building modern static web-sites using Vite builder"><meta property="og:keywords" content="vite,vituum,builder,frontend,starter,boilerplate,kit,twig,html,css,sass,scss,javascript,js,es6,optimized,autoprefixer,404,grid,htaccess,robots.txt,sitemap.xml,favicon"><meta property="og:image" content=""><meta property="twitter:card" content="summary"><meta property="twitter:url" content=""><meta property="twitter:title" content="Guide - Vite Frontend Starter"><meta property="twitter:description" content="Vite FrontEnd Starter is a boilerplate kit for easy building modern static web-sites using Vite builder"><meta property="twitter:image" content=""><link rel="canonical" href=""><link rel="image_src" href=""><link rel="icon shortcut" type="image/x-icon" sizes="any" href="/vite-frontend-starter/favicon.ico"><link rel="icon" type="image/svg+xml" href="/vite-frontend-starter/favicon.svg"><link rel="icon" type="image/png" href="/vite-frontend-starter/favicon.png"><link rel="apple-touch-icon" href="/vite-frontend-starter/favicon.png"><script type="module" crossorigin src="/vite-frontend-starter/js/KOn_KdpT.js"></script><link rel="stylesheet" crossorigin href="/vite-frontend-starter/css/CqaSHwNd.css"></head><body><script src="/vite-frontend-starter/data-theme.js"></script><header id="header" class="header"><div class="container"><div class="header__wrapper"><a href="/vite-frontend-starter" class="header__logo"><img class="header__logo-image" src="/vite-frontend-starter/img/BK4y5Bv0.svg" alt="Vite Logo" height="24"> <span class="header__logo-text">Vite Frontend Starter</span> <span class="label label_primary header__logo-label">v1.3.2</span></a><nav class="header__nav"><a href="/vite-frontend-starter" class="header__nav-item">Home</a> <a href="/vite-frontend-starter/guide" class="header__nav-item active">Guide</a> <a href="/vite-frontend-starter/components" class="header__nav-item">Components</a></nav><div class="header__appearance"><span data-theme-set="dark" class="header__appearance-item" title="Switch to dark theme"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sun"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"/></svg></span><span data-theme-set="light" class="header__appearance-item" title="Switch to light theme"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-moon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"/></svg></span></div><div class="header__social"><a href="https://github.com/zakandaiev/vite-frontend-starter" target="_blank" class="header__social-item" title="View on GitHub"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-github"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"/></svg></a></div></div></div></header><main class="page-content"><div class="container"><div class="row gap-xs"><div class="col-xs-12 col-md-8 order-xs-2 order-md-1"><div class="section section_offset-bottom"><h1>Getting Started</h1></div><section class="section section_offset border-top"><h2 class="section__title">Overview</h2><div class="section__body"><p>Vite FrontEnd Starter is a boilerplate kit for easy building modern static web-sites using Vite builder.</p><p>Vite's requirements and documentation you'll find on <a href="https://vitejs.dev/" target="_blank">its official website</a>.</p><p>This starter is delivering with ready-to-use utils, styled components, helpers and much more. Its overview is available in <a href="/vite-frontend-starter/components">components</a> section.</p></div></section><section class="section section_offset border-top"><h2 class="section__title">How to use</h2><div class="section__body"><h4 class="font-regular">Instalation</h4><div class="box"><pre>
|
|
<span class="color-muted"># Clone the repository</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">git clone</span> https://github.com/zakandaiev/vite-frontend-starter.git</span>
|
|
|
|
<span class="color-muted"># Go to the folder</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">cd</span> vite-frontend-starter</span>
|
|
|
|
<span class="color-muted"># Install packages</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> i</span>
|
|
<span class="color-muted"># or</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> install</span>
|
|
|
|
<span class="color-muted"># Remove link to the original repository</span>
|
|
<span class="color-muted"># - if you use Windows system</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">Remove-Item</span> .git <span class="color-info">-Recurse -Force</span></span>
|
|
<span class="color-muted"># - or if you use Unix system</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">rm</span> <span class="color-info">-rf</span> .git</span>
|
|
</pre></div><h4 class="font-regular">Develop</h4><div class="box"><pre>
|
|
<span class="color-muted"># Start development mode with live-server</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run dev</span>
|
|
<span class="color-muted"># or with options</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run dev <span class="color-info">--port=3000</span></span>
|
|
</pre></div><h4 class="font-regular">Build</h4><div class="box"><pre>
|
|
<span class="color-muted"># Build static files for production</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run build</span>
|
|
<span class="color-muted"># or</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run prod</span>
|
|
<span class="color-muted"># or with options</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run build <span class="color-info">--base=/subdomain --outDir=/dest</span></span>
|
|
|
|
<span class="color-muted"># Start server for build preview</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run preview</span>
|
|
<span class="color-muted"># or with options</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run preview <span class="color-info">--port=3001</span></span>
|
|
</pre></div><h4 class="font-regular">Lint</h4><div class="box"><pre>
|
|
<span class="color-muted"># ESLint</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run lint:js</span>
|
|
<span class="color-muted"># or</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run lint:js<span class="color-info">:fix</span></span>
|
|
|
|
<span class="color-muted"># StyleLint</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run lint:css</span>
|
|
<span class="color-muted"># or</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run lint:css<span class="color-info">:fix</span></span>
|
|
</pre></div><h4 class="font-regular">Backend emulation</h4><div class="box"><pre>
|
|
<span class="color-muted"># Fastify listen backend.js</span>
|
|
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run backend</span>
|
|
</pre></div></div></section></div><div class="col-xs-12 col-md-3 offset-md-1 align-self-start position-sticky order-xs-1 order-md-2 bg-body"><div class="section__navigation"></div></div></div></div></main><footer id="footer" class="footer section_offset"><div class="container">Made by <a href="https://github.com/zakandaiev" target="_blank">Oleksandr Zakandaiev</a></div></footer></body></html> |