Vue project structure walkthrough - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the src folder in a Vue project?

The src folder holds the main source code of the Vue app, including components, views, assets, and main entry files like main.js or main.ts. It's where you write your app's logic and UI.

beginner

What does the components folder usually contain in a Vue project?

The components folder contains reusable Vue components. These are small building blocks like buttons, headers, or cards that you can use throughout your app.

beginner

Why is the public folder important in a Vue project?

The public folder holds static files like index.html, images, or icons that are served directly without processing. It is the base HTML page that loads your Vue app.

intermediate

What role does main.js or main.ts play in a Vue project?

This file is the app's entry point. It creates the Vue app instance, connects plugins, and mounts the app to the HTML page. Think of it as the starting point of your app.

intermediate

What is the purpose of the views or pages folder in a Vue project?

The views or pages folder contains components that represent full pages or screens in your app. They often combine multiple smaller components and are linked to routes.

Which folder in a Vue project typically contains reusable UI parts like buttons or cards?

A views

B public

C assets

D components

The components folder holds reusable UI parts used throughout the app.

Where do you place static files like favicon.ico or robots.txt in a Vue project?

A src/assets

B public

C components

D views

Static files served as-is go into the public folder.

What is the main purpose of main.js or main.ts in a Vue project?

A Create and mount the Vue app

B Store global styles

C Define routes

D Hold reusable components

main.js or main.ts creates the Vue app instance and mounts it to the page.

Which folder usually contains components that represent full pages in a Vue app?

A views or pages

B components

C assets

D public

views or pages hold components representing full pages or screens.

Where do you typically put images used inside your Vue components?

A public

B views

C src/assets

D components

Images used inside components usually go in src/assets to be processed by build tools.

Describe the main folders in a Vue project and what each is used for.

Think about where you write code, where you keep static files, and how the app starts.

Explain the role of main.js or main.ts in starting a Vue app.

Consider what happens first when your app loads in the browser.