Vue CLI

🛠️ What is Vue CLI?

Vue CLI is a command-line tool for quickly scaffolding Vue projects. It provides project templates, development servers, build tools, and plugin systems. Vue CLI simplifies setup and lets you focus on building your application immediately.


# Create a new Vue project
npm create vue@latest my-project

CLI Features

🚀

Quick Setup

Create projects instantly

npm create vue@latest

⚙️

Dev Server

Hot reload development

npm run dev

📦

Build Tool

Production optimization

npm run build

🔌

Plugins

Extend functionality

npm install plugin

🔹 Installation

Install Node.js first, then create a Vue project:

# Check Node.js version (need 16.0 or higher)
node -v

# Create new Vue project (recommended)
npm create vue@latest

# Or using yarn
yarn create vue

# Or using pnpm
pnpm create vue

Note: npm create vue@latest uses create-vue, the official Vue project scaffolding tool powered by Vite.

🔹 Creating a Project

Interactive project setup with customization options:

npm create vue@latest my-vue-app

# You'll be prompted with:
✔ Add TypeScript? › No / Yes
✔ Add JSX Support? › No / Yes
✔ Add Vue Router? › No / Yes
✔ Add Pinia? › No / Yes
✔ Add Vitest? › No / Yes
✔ Add ESLint? › No / Yes
✔ Add Prettier? › No / Yes

cd my-vue-app
npm install
npm run dev

Result:

VITE v5.0.0  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

🔹 Project Structure

Default Vue project structure:

my-vue-app/
├── public/              # Static assets
│   └── favicon.ico
├── src/
│   ├── assets/          # Images, styles
│   ├── components/      # Vue components
│   │   └── HelloWorld.vue
│   ├── App.vue          # Root component
│   └── main.js          # Entry point
├── index.html           # HTML template
├── package.json         # Dependencies
└── vite.config.js       # Vite configuration

🔹 Common Commands

Essential commands for Vue development:

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run tests (if configured)
npm run test

# Lint code (if ESLint configured)
npm run lint

Command Details:

dev: Starts local server with hot reload at localhost:5173
build: Creates optimized production files in /dist folder
preview: Preview production build locally before deployment

🔹 Adding Vue Router

Add routing to your Vue application:

# Install Vue Router
npm install vue-router@4

# Create router file (src/router/index.js)
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

# Use in main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

🔹 Adding Pinia (State Management)

Add centralized state management:

# Install Pinia
npm install pinia

# Create store (src/stores/counter.js)
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

# Use in main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

🔹 Environment Variables

Use environment variables for configuration:

# Create .env file in project root
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vue App

# Access in code
console.log(import.meta.env.VITE_API_URL)
console.log(import.meta.env.VITE_APP_TITLE)

Important: Only variables prefixed with VITE_ are exposed to your client-side code.

🔹 Vite Configuration

Customize build and dev server settings:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

🔹 Building for Production

Create optimized production build:

# Build project
npm run build

# Output in dist/ folder:
dist/
├── assets/
│   ├── index-abc123.js
│   └── index-def456.css
└── index.html

# Preview build locally
npm run preview

# Deploy dist/ folder to hosting service

Deployment: Upload the dist folder to services like Vercel, Netlify, or GitHub Pages.

🔹 Quick Start Example

Complete workflow from creation to running:

# 1. Create project
npm create vue@latest my-app

# 2. Navigate to project
cd my-app

# 3. Install dependencies
npm install

# 4. Start development server
npm run dev

# 5. Open browser to http://localhost:5173

# 6. Edit src/App.vue and see changes instantly!

# 7. Build for production when ready
npm run build