Creating Single Page Applications (SPAs) with Vue.js — A Complete Beginner’s Guide

📘 Chapter 2: Setting Up Your Vue.js Development Environment

🧭 What You’ll Learn

By the end of this chapter, you’ll know how to:

• Install Node.js and npm
• Choose between Vue CLI and Vite
• Scaffold your first Vue project
• Understand project structure and file purpose
• Run your app with hot reloading
• Use essential developer tools like VS Code and browser extensions

🚀 Why a Proper Environment Setup Matters

A well-prepared development environment ensures:

• Smoother development with fewer errors
• Faster iteration thanks to hot module reloading
• Better understanding of Vue’s structure and tooling
• Cleaner project architecture for scaling

🔧 Step 1: Install Node.js and npm

Vue.js uses Node.js and npm (Node Package Manager) for dependency management and tooling.

✅ Installation:

Go to: https://nodejs.org
Download the LTS version (recommended for most users)

After installation, confirm via terminal:

bash

node -v

npm -v

⚠️ If you're using Mac or Linux, consider using nvm (Node Version Manager) to handle multiple Node versions.

📦 Step 2: Install a Project Scaffold Tool

You have two primary choices:

✳️ Installing Vue CLI (Option 1)

bash

npm install -g @vue/cli

Check if it worked:

bash

vue --version

Then create a new project:

bash

vue create my-vue-spa

You’ll be prompted to choose between:

• Default preset (Babel + ESLint)
• Manual features (e.g., Vuex, Router, Linter)

⚡ Setting Up with Vite (Option 2 - Recommended)

bash

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

cd my-vue-spa

npm install

npm run dev

This uses ES modules, giving you a blazing-fast dev experience.

📂 Step 3: Understanding Vue Project Structure

Once created, your project folder will look like this (Vite-based):

bash

my-vue-spa/

├── index.html

├── package.json

├── vite.config.js

├── src/

│   ├── App.vue

│   ├── main.js

│   ├── assets/

│   └── components/

File & Folder Breakdown:

🔁 Step 4: Running Your App

Inside your project directory, run:

bash

npm run dev

This starts the dev server on http://localhost:5173 (or similar). Open this in a browser to view your Vue SPA live.

🧰 Step 5: Recommended Developer Tools

🖥️ Code Editor: Visual Studio Code

• Lightweight and feature-rich
• Extensions for Vue, ESLint, Prettier

🧩 Recommended VS Code Extensions

🌐 Browser Extensions

⚙️ Step 6: Explore and Edit Components

Open App.vue in your editor and modify it:

vue

<template>

  <h1>Hello, Vue World!</h1>

  <p>This is your first SPA!</p>

</template>

<script>

export default {

  name: 'App'

}

</script>

<style>

h1 {

  color: #42b983;

}

</style>

Save the file — the browser auto-refreshes. That’s hot module reloading in action.

📚 Bonus: Adding Vue Router (For SPAs)

Install Vue Router (if not selected during setup):

bash

npm install vue-router@4

Create router/index.js:

js

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../components/Home.vue'

import About from '../components/About.vue'

const routes = [

  { path: '/', component: Home },

  { path: '/about', component: About }

]

export default createRouter({

  history: createWebHistory(),

  routes

})

In main.js:

js

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

createApp(App).use(router).mount('#app')

🧠 CLI Commands You’ll Use Often

📊 Comparison: Vue CLI vs Vite

💡 Pro Tips

• Use .env files for environment-specific variables
• Create reusable components early (e.g., <BaseButton>, <Card>)
• Set up Prettier to auto-format code on save
• Organize folders: views/, store/, utils/, layouts/ for scaling

✅ Setup Checklist