Introduction to Vue.js & Vite

💚 Vue.js Lesson 1 Beginner

Vue.js (commonly known as Vue) is a progressive JavaScript framework used to build modern, reactive user interfaces. It focuses on the view layer only, making it easy to integrate into existing projects while remaining fully capable of powering complex Single Page Applications (SPAs).

1 What is a Progressive Framework?

Unlike monolithic frameworks, Vue is designed to be incrementally adoptable:

Simple Core Library: Start by embedding Vue via CDN to add reactivity to static HTML layouts.
Fully Featured Ecosystem: Scale up by importing Vue Router for client-side navigation, Pinia for state management, and Vite for build optimization.
Virtual DOM: Uses a lightweight, in-memory representation of the DOM to compute and apply minimum page updates, optimizing rendering speed.

2 Scaffolding with Vite

Vite is the modern build tool recommended by the Vue core team for project generation, featuring rapid hot module replacement (HMR) and fast build execution.

Terminal — Create Vue + Vite Project

# 1. Initialize project scaffold
npm create vue@latest

# 2. Select project options (TypeScript, Router, Pinia etc)
# 3. Navigate into workspace folder
cd my-vue-project

# 4. Install dependencies
npm install

# 5. Spin up development server
npm run dev

3 Code Challenge

Challenge: Open your terminal, initialize a new Vue scaffold using Vite, and inspect the entry points inside src/main.js and the base index.html page.