Understanding the Vue Project Structure

After creating a Vue app with Vite, you get a ready project with several folders and files. These files help organize your code and run the application.

The most important parts of the project are:

• index.html: the main HTML file where the app is loaded;
• src/: the folder where your application code lives;
• src/main.js: the entry point of the app;
• src/App.vue: the root component of the application;
• src/components/: a folder for reusable components.

The application starts in main.js.

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

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

This code creates the Vue app and mounts it to an element in index.html.

Inside App.vue, you define the main structure of your interface.

<template>
  <h1>Hello Vue</h1>
</template>

Vue components use a special file format with three sections:

• <template>: defines the HTML structure;
• <script>: contains JavaScript logic;
• <style>: contains component styles.

This structure helps you keep layout, logic, and styling together in one place.