Vue CLI: Webpack-Based Scaffolding

Vue CLI has long been the standard tooling for Vue.js development, relying on Webpack for module bundling. It provides a full system for rapid Vue project development.

Installation and Project Creation

To use Vue CLI globally, execute the following commands in your terminal. This allows you to scaffold new projects directly from the command line.

# Install globally
npm install -g @vue/cli

# Create a new project
vue create my-project-name

Once installed, the vue-cli-service binary becomes available within the project. This service abstracts the Webpack configuration, handling the build pipeline and development server logic. The project structure typically includes configuration files like .browserslistrc, which defines the target browser compatibility ranges for the build process.

Vite: Next-Generation Frontend Tooling

Vite represents a shift in frontend build tooling, moving away from heavy bundling during development to leveraging native browser capabilities.

Core Mechanics

When the Vite development server starts, it does not bundle the entire application. Instead, it utilizes native ES modules (ESM) supported by modern browsers. When a browser requests a JavaScript file, Vite serves it directly. For files that require transformation, such as .vue single-file components, Vite compiles them on the fly and serves the result as valid ESM.

This approach results in significantly faster startup times compared to Webpack-based tools. Vite handles dependencies differently by pre-bundling them using ESBuild. These dependencies are cached in the node_modules/.vite directory to optimize future requests.

Installation and Configuration

Vite can be added to an existing project or used to scaffold a new one.

# Install Vite as a development dependency
npm install -D vite

To work with Vue 3 components, the official plugin is required.

# Install Vue and the Vite plugin
npm install -S vue
npm install -D @vitejs/plugin-vue

Create a vite.config.js file in the root directory to configure the plugin.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()]
});

Integrations

• TypeScript: Vite provides out-of-the-box suppport for TypeScript, compiling .ts files without extra configuration.
• CSS Pre-processors: Adding support for Sass is straightforward.

npm install -D sass

• PostCSS: To use modern CSS features, configure PostCSS by creating a postcss.config.js file.

module.exports = {
  plugins: {
    'postcss-preset-env': {}
  }
};

ESBuild Performance

A key factor in Vite's speed is ESBuild. Written in Go, ESBuild compiles code directly to machine code, bypassing the overhead of the Node.js interpretation layer. This makes dependency pre-bundling significantly faster than traditional JavaScript-based bundlers like Babel.

Vite Commands

Vite provides three primary commands for the development lifecycle.

# Start development server
npx vite

# Build for production
npx vite build

# Preview production build locally
npx vite preview

Scaffolding New Projects

For starting fresh projects, Vite offers dedicated scaffolding tools to quickly generate the boilerplate structure.

# Equivalent to npm init vite
npm create vite@latest my-app