Prerequisites
- Make sure you have installed Node.js version 18.3+
- You need to create a Vue app by following this article.
Project Structure
When you create a Vue app, you will get a folder that includes files and folders similar to the ones below:

Let’s Explore!
Not all files and folders require constant interaction, but here is a list of those you need to know when developing a Vue app:
src folder
The src
folder is the main folder where all the application logic is implemented. You'll primarily interact with this folder throughout the entire Vue app development process.

main.ts
This is the starting point when you run a Vue app. It includes a function that initializes the application.
App.vue
This is the main component that sits on top of other components.
assets folder
This folder stores resources like images, styles, and fonts used in the project, processed by the build tool before inclusion in the final build.
components folder
All application logic components are stored in this folder.
router folder
Routes for the entire app are set up in this folder. (Vue Router Folder)
stores folder
All of the application state management is stored in this folder. (Pinia Folder)
views folder
This folder holds components for different pages, usually mapped to routes.
Other files
The following files do not need to be touched frequently unless you need to configure or add new plugins to your application.

index.html
The main HTML template where the Vue app is mounted.
vite.config.ts
This file configures Vite with project settings, plugins, and optimizations.
tsconfig.json
This file configures the TypeScript compiler options for the project.
package.json
This file manages project dependencies, scripts, and metadata.
Other Folders
There are a few things left. They are the following folders.

public folder
Contains static files (like icons, and other resources) that are directly served by the server without processing.
dist folder
This folder contains the final, bundled, and optimized output of the project, ready for deployment.
.vscode folder
This folder stores project-specific settings for Visual Studio Code.
node_modules folder
This folder contains all the installed dependencies for the project.
Conclusion
This is a brief explanation of the project structure. You should start developing the application with what you know and explore more as you need to learn more.