Meta tags:
description= Next Generation Frontend Tooling;
Headings (most frequently used words):
vite, project, community, root, getting, started, overview, browser, support, trying, online, scaffolding, your, first, templates, index, html, and, command, line, interface, using, unreleased, commits, specifying, alternative,
Text of the page (most frequently used words):
vite (56), the (35), #project (22), you (18), for (17), and (16), your (15), vue (13), can (12), with (12), build (10), npm (10), that (9), pnpm (9), dev (9), root (9), create (9), template (9), community (8), server (7), html (7), run (6), index (6), link (5), use (5), latest (5), using (5), production (5), are (5), also (5), static (5), code (5), via (5), templates (5), api (5), plugins (5), features (4), this (4), out (4), github (4), npx (4), command (4), see (4), more (4), module (4), javascript (4), svelte (4), lit (4), preact (4), react (4), vanilla (4), app (4), yarn (4), version (4), support (4), why (3), need (3), discord (3), then (3), based (3), package (3), manager (3), development (3), https (3), will (3), specify (3), options (3), like (3), preview (3), scripts (3), directly (3), default (3), line (3), which (3), from (3), source (3), setup (3), script (3), degit (3), main (3), tool (3), awesome (3), supported (3), online (3), browser (3), plugin (3), native (3), rollup (3), getting (3), started (3), config (3), guide (3), page (2), have (2), help (2), global (2), clone (2), vitejs (2), git (2), install (2), new (2), local (2), machine (2), repo (2), unreleased (2), commits (2), additional (2), cli (2), full (2), start (2), serve (2), interface (2), working (2), directory (2), alternative (2), some (2), entry (2), referenced (2), urls (2), file (2), handling (2), even (2), inside (2), type (2), one (2), user (2), frameworks (2), scaffold (2), details (2), example (2), require (2), node (2), about (2), scaffolding (2), first (2), but (2), trying (2), browsers (2), legacy (2), section (2), building (2), esm (2), highly (2), pre (2), hmr (2), overview (2), 日本語 (2), 简体中文 (2), english (2), languages (2), changelog (2), compat (2), chat (2), twitter (2), links (2), suggest, changes, questions, reach, discussions, used, globally, now, restart, ride, bleeding, edge, com, packages, preferred, step, wait, release, test, yourself, required, list, port, locally, aliases, where, installed, binary, here, scaffolded, running, starts, current, sub, dir, specifying, supports, multiple, points, multi, apps, similar, http, servers, has, concept, files, served, throughout, rest, docs, absolute, resolved, base, write, normal, except, way, powerful, capable, dependencies, resolve, system, locations, makes, usable, monorepo, treats, part, graph, resolves, references, inline, css, enjoy, specific, addition, automatically, rebased, there, special, placeholders, public_url, href, src, thing, may, noticed, front, central, instead, being, tucked, away, intentional, during, point, application, public, uses, branch, suffix, quickly, basic, popular, check, include, other, tools, target, different, maintained, each, extra, double, dash, needed, name, want, follow, prompts, requires, however, higher, work, please, upgrade, warns, compatibility, note, typescript, presets, try, runs, almost, identical, doesn, installing, anything, navigate, select, framework, stackblitz, targets, both, official, dynamic, import, tags, learn, rationale, behind, opinionated, comes, sensible, defaults, box, extensible, its, typing, bundles, configured, output, optimized, assets, provides, over, extremely, fast, hot, replacement, modules, rich, feature, enhancements, french, word, quick, pronounced, veet, aims, provide, faster, leaner, experience, modern, web, projects, consists, two, major, parts, vit, sponsors, reference, apis, migration, comparisons, backend, integration, side, rendering, ssr, env, variables, modes, deploying, site, asset, dependency, bundling, documentation, covers, old,
Text of the page (random words):
getting started vite this documentation covers vite 2 old version for the latest version see https vite dev vite guide config plugins links twitter discord chat awesome vite dev community rollup plugins compat changelog languages english 简体中文 日本語 github guide config plugins links twitter discord chat awesome vite dev community rollup plugins compat changelog languages english 简体中文 日本語 github guide why vite getting started overview browser support trying vite online scaffolding your first vite project community templates index html and project root command line interface using unreleased commits community features using plugins dependency pre bundling static asset handling building for production deploying a static site env variables and modes server side rendering ssr backend integration comparisons migration from v1 apis plugin api hmr api javascript api config reference sponsors getting started overview vite french word for quick pronounced vit like veet is a build tool that aims to provide a faster and leaner development experience for modern web projects it consists of two major parts a dev server that provides rich feature enhancements over native es modules for example extremely fast hot module replacement hmr a build command that bundles your code with rollup pre configured to output highly optimized static assets for production vite is opinionated and comes with sensible defaults out of the box but is also highly extensible via its plugin api and javascript api with full typing support you can learn more about the rationale behind the project in the why vite section browser support the default build targets browsers that support both native esm via script tags and native esm dynamic import legacy browsers can be supported via the official vitejs plugin legacy see the building for production section for more details trying vite online you can try vite online on stackblitz it runs the vite based build setup directly in the browser so it is almost identical to the local setup but doesn t require installing anything on your machine you can navigate to vite new template to select which framework to use the supported template presets are javascript typescript vanilla vanilla ts vue vue ts react react ts preact preact ts lit lit ts svelte svelte ts scaffolding your first vite project compatibility note vite requires node js version 12 2 0 however some templates require a higher node js version to work please upgrade if your package manager warns about it with npm npm create vite latest with yarn yarn create vite with pnpm pnpm create vite then follow the prompts you can also directly specify the project name and the template you want to use via additional command line options for example to scaffold a vite vue project run npm 6 x npm create vite latest my vue app template vue npm 7 extra double dash is needed npm create vite latest my vue app template vue yarn yarn create vite my vue app template vue pnpm pnpm create vite my vue app template vue see create vite for more details on each supported template vanilla vanilla ts vue vue ts react react ts preact preact ts lit lit ts svelte svelte ts community templates create vite is a tool to quickly start a project from a basic template for popular frameworks check out awesome vite for community maintained templates that include other tools or target different frameworks you can use a tool like degit to scaffold your project with one of the templates npx degit user project my project cd my project npm install npm run dev if the project uses main as the default branch suffix the project repo with main npx degit user project main my project index html and project root one thing you may have noticed is that in a vite project index html is front and central instead of being tucked away inside public this is intentional during development vite is a server and index html is the entry point to your application vite treats index html as source code and part of the module graph it resolves script type module src that references your javascript source code even inline script type module and css referenced via link href also enjoy vite specific features in addition urls inside index html are automatically rebased so there s no need for special public_url placeholders similar to static http servers vite has the concept of a root directory which your files are served from you will see it referenced as root throughout the rest of the docs absolute urls in your source code will be resolved using the project root as base so you can write code as if you are working with a normal static file server except way more powerful vite is also capable of handling dependencies that resolve to out of root file system locations which makes it usable even in a monorepo based setup vite also supports multi page apps with multiple html entry points specifying alternative root running vite starts the dev server using the current working directory as root you can specify an alternative root with vite serve some sub dir command line interface in a project where vite is installed you can use the vite binary in your npm scripts or run it directly with npx vite here are the default npm scripts in a scaffolded vite project scripts dev vite start dev server aliases vite dev vite serve build vite build build for production preview vite preview locally preview production build you can specify additional cli options like port or https for a full list of cli options run npx vite help in your project using unreleased commits if you can t wait for a new release to test the latest features you will need to clone the vite repo to your local machine and then build and link it yourself pnpm is required git clone https github com vitejs vite git cd vite pnpm install cd packages vite pnpm run build pnpm link global you can use your preferred package manager for this step then go to your vite based project and run pnpm link global vite or the package manager that you used to link vite globally now restart the development server to ride on the bleeding edge community if you have questions or need help reach out to the community at discord and github discussions suggest changes to this page why vite features
|