🧱 Vue CLI & Project Structure – Set Up Modern Vue Apps the Right Way (2025 Guide)

---

🧲 Introduction – Why Use Vue CLI?

Vue CLI (Command Line Interface) is a powerful tool that helps developers quickly scaffold, develop, and maintain Vue.js applications. It sets up the project with sensible defaults, integrates build tools like Webpack or Vite, and offers features like hot-reloading, linting, unit testing, and more.

🎯 In this guide, you’ll learn:

• How to install and use Vue CLI
• The standard folder structure of a Vue CLI project
• What each file and folder is used for
• Tips for managing and scaling Vue projects

---

⚙️ How to Install Vue CLI

To install globally:

npm install -g @vue/cli

Then check the version:

vue --version

✅ If installed correctly, it shows the CLI version (e.g., @vue/cli 5.x.x).

---

🚀 Creating a New Vue Project

Run the following command:

vue create my-vue-app

You’ll be prompted to:

• Pick a preset (default or Manually select features)
• Choose Vue 2 or Vue 3
• Select features (Babel, TypeScript, Vuex, Router, Linter, Unit Testing, etc.)

Example:

Vue CLI v5.0.0
? Please pick a preset: Manually select features
> Babel, Router, Vuex, Linter

---

🧱 Vue CLI Project Structure – Folder Overview

After running vue create, you’ll see a structure like this:

my-vue-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── vue.config.js

📁 /public/

• Contains index.html
• Not processed by Webpack
• Static assets go here

📁 /src/

The source code for your app:

Folder/File	Purpose
main.js	Entry point; mounts Vue app to DOM
App.vue	Root component
/components/	Reusable Vue components
/views/	Page-level components (used with Vue Router)
/assets/	Static images, fonts, stylesheets

---

🧬 Detailed Breakdown of Important Files

✅ main.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

🧠 This initializes the Vue app and mounts it to the div#app in index.html.

---

✅ App.vue

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
};
</script>

🧠 Acts as the root component for the entire app.

---

✅ vue.config.js

Optional file to configure things like:

• Dev server port
• Aliases
• Build options

module.exports = {
  publicPath: '/',
  lintOnSave: true
};

---

🛠️ CLI Tools and Features

Feature	Description
Hot Module Reload	Live preview while editing code
ESLint	Automatically checks code style
Babel	Transpiles modern JS to be browser compatible
Vue Router	Adds SPA routing with views
Vuex	Manages global state
Unit Testing	Adds Jest or Mocha test setup

---

🧰 CLI UI Tool

Run:

vue ui

🔍 Launches a local GUI to create/manage projects visually.

---

🔄 Running & Building the App

Command	Purpose
npm run serve	Start dev server (usually at localhost:8080)
npm run build	Build for production
npm run lint	Lint your code
npm run test:unit	Run unit tests (if enabled)

---

📌 Summary – Recap & Next Steps

Vue CLI helps streamline app setup and development with boilerplate-free scaffolding and a powerful configuration system. It’s perfect for both small projects and large enterprise-grade Vue applications.

🔍 Key Takeaways:

• Install with npm install -g @vue/cli
• Scaffold apps using vue create
• Follow the folder structure: src/, public/, components/
• Use vue.config.js for custom configurations

⚙️ Real-World Relevance:
Used in enterprise SPA development, frontend apps, admin dashboards, eCommerce stores, and mobile PWA projects.

---

❓ FAQ Section

❓ What is the difference between public/ and src/?

✅ public/ holds static files served as-is. src/ is where your Vue code lives and is processed by Webpack.

---

❓ Can I modify the build process in Vue CLI?

✅ Yes, using vue.config.js to extend or override Webpack configuration.

---

❓ What’s the default build tool in Vue CLI?

✅ Vue CLI 5+ uses Webpack by default but supports Vite through plugins.

---

❓ How do I add TypeScript or Vuex to an existing project?

✅ Run:

vue add typescript
vue add vuex

---

❓ Is Vue CLI still relevant with Vite?

✅ Yes. Vue CLI is stable and feature-rich. Vite is faster for dev builds but Vue CLI still suits complex setups.

---

Share Now :