Vue Project Structure

When you create a new project using the official scaffolding create-vue, you'll get a clearly structured folder and file layout. Understanding this structure is crucial for subsequent development. Below is an explanation of the structure of a typical Vue 3 project:

my-vue-app/
├── .vscode/              # VS Code editor-related configuration
├── node_modules/         # Stores all third-party package dependencies for the project
├── public/               # Stores static resources that won't be processed by bundling
│   └── favicon.ico       # Website icon
├── src/                  # The core source code directory of the project
│   ├── assets/           # Stores static resources that will be processed by bundling (CSS, images, etc.)
│   │   └── main.css      # Main CSS file
│   ├── components/       # Stores reusable Vue components
│   │   └── HelloWorld.vue # An example component
│   ├── App.vue           # The root component of the application
│   └── main.js           # The entry file of the application
├── .gitignore            # List of files ignored by Git version control
├── index.html            # The entry HTML file of the single-page application
├── package.json          # Project metadata and dependency management file
├── package-lock.json     # Locks the versions of project dependencies
├── README.md             # Project documentation
└── vite.config.js        # Vite configuration file

Detailed Explanation of Key Files and Directories

• index.html This is the "shell" of your single-page application. It's a simple HTML file containing a <div id="app"></div>. The entire Vue application is eventually mounted to this DOM element. Vite automatically inserts the bundled CSS and JS files into this file during the build.

• src/ This is the directory where you'll spend most of your time working, containing all the application's source code.

• src/main.js (or main.ts) This is the entry point of the entire application. Its main roles are:

  1. Import the createApp function from Vue.
  2. Import the root component App.vue.
  3. Create a Vue application instance and mount the root component to the <div id="app"> element in index.html.

• src/App.vue This is the application's root component. You can think of it as the container for all other components. The page views and main layout of the application are defined in this file.

• src/components/ This directory is used to store all reusable child components. For example, you can create a Button.vue or Navbar.vue component and reuse them in different places of the application. Component-based development is the core philosophy of Vue development.

• src/assets/ This directory is used to store static resources that need to be processed by Vite during bundling, such as CSS files, Sass files, images, etc. When you reference a resource here, Vite will optimize and process it during the build.

• public/ This directory is used to store static resources that do not need to be processed by bundling and need to be copied unchanged to the root directory of the build output. For example, robots.txt or some third-party library files that must maintain specific names or paths.

• package.json The manifest file for Node.js projects. It defines the project's name, version, and most importantly—the project's dependencies (dependencies and devDependencies) and scripts that can be run (scripts, such as dev, build).

• vite.config.js (or vite.config.ts) This is the configuration file for the build tool Vite. You can configure plugins, define proxies, modify build options, etc. here.