If you are interested to learn more about Vite before trying it, check out the Introduction section.
Vite requires Node.js version >=12.0.0.
$ npm init @vitejs/app
$ yarn create @vitejs/app
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 init @vitejs/app my-vue-app --template vue
Supported template presets include:
See @vitejs/create-app for more details on each template.
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 is the default npm scripts in a scaffolded Vite project:
You can specify additional CLI options like
--https. For a full list of CLI options, run
npx vite --help in your project.
Since Vite is a dev server, it has the concept of a “root directory” from which your files are served from, similar to a static file server (although much more powerful).
vite starts the dev server using the current working directory as root. You can specify an alternative root with
vite serve some/sub/dir.
Vite will serve
<root>/index.html when you open the server’s local address. It is also used as the default build entry point. Unlike some bundlers that treat HTML as an afterthought, Vite treats HTML files as part of the application graph (similar to Parcel). Therefore you should treat
index.html as part of your source code instead of a static file. Vite also supports multi-page apps with multiple
.html entry points.
Vite will automatically pick up
<root>/vite.config.js if there is one. You can also explicitly specify a config file to use via the
--config <file> CLI option.
Unlike a static file server, Vite can actually resolve and serve dependencies located anywhere on your file system, even if they are out of the project root. This allows Vite to work properly inside a sub package of a monorepo.
git clone https://github.com/vitejs/vite.git
Then go to your vite based project and run
yarn link vite. Now restart the development server (
yarn dev) to ride on the bleeding edge!