Vite Vue Cheatsheet

Vue.js for Beginners Part 2

5. Configuring Vue.js with Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects¹[4]4. It consists of two major parts: A dev server that provides rich feature enhancements over native ES modules, and a build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production¹[4]4.

Step 1: Installing Vite

First, you need to have Node.js installed on your machine. If you haven’t installed Node.js, download it from the official website²[6]6. Then, you can create a new Vite project using the following command²[6]6:

npm create vite@latest my-vue-app --template vue

This command creates a new Vite project with the Vue template²[6]6.

Step 2: Understanding Vite Configuration

Vite is highly configurable and comes with sensible defaults out of the box¹[4]4. You can adapt Vite to your project by creating a vite.config.js or vite.config.ts file in the root of your project directory¹[4]4. Here's an example of a basic Vite configuration:

// vite.config.js
export default {
  base: "./", // set base path
  outDir: "dist", // specify output directory
  assetsDir: "assets", // specify directory for assets
  sourcemap: true, // generate source map
};

Step 3: Running the Vite Server

You can start the Vite dev server with the following command:

npm run dev

This command starts a local development server, which serves your Vue.js application and hot-reloads the page during development¹[4]4.

Step 4: Building for Production

When you're ready to deploy your application, you can build it for production using the following command:

npm run build