In the previous chapter, we used npm to install the project (Vue-cli and Vite). We open this directory in an IDE (Vscode, Atom, etc.), and the structure is as follows:
**Command Line Tool vue-cli (-vue3-test):**
!(#)
**Vite (-vue3-test2)**
!(#)
A standard Vue 3 project can typically be divided into three layers:
* **Project Root Directory:** Build tools and project configuration
* **public Directory:** Static assets that are not processed by the build tool
* **src Directory:** Almost all business code is here; daily development basically takes place in this directory.
Typical Vue project structure:
vue-project/├── public/ # Static assets, directly copied to the build output directory│ └── favicon.ico # Website icon├── src/│ ├── assets/ # Static assets (such as images, fonts, CSS)│ │ └── logo.png │ ├── components/ # Reusable general components│ │ └── CommonHeader.vue │ ├── composables/ # Reusable Composition API logic (optional)│ │ └── useFetch.js │ ├── router/ # Router configuration│ │ └── index.js │ ├── stores/ # Pinia state management (or store/ for Vuex)│ │ └── index.js │ ├── utils/ # Utility functions (such as request encapsulation, formatting)│ │ └── request.js │ ├── views/ # Page-level components (corresponding to route pages)│ │ ├── HomeView.vue │ │ └── AboutView.vue │ ├── App.vue # Root component│ └── main.js # Entry file (creates the Vue application)├── index.html # HTML entry template├── vite.config.js # Vite configuration file├── package.json # Project dependencies and scripts├── .gitignore # Git ignore file├── .env # Environment variables (development)├── .env.production # Environment variables (production)└── README.md # Project description
### Directory Explanation
| Path | Description |
| --- | --- |
| public/ | Stores static assets that are not processed by the build tool, directly copied to the dist directory, commonly used for favicon, robots.txt, etc. |
| public/favicon.ico | Website icon (favicon) |
| src/ | Main directory for project source code, where all development code is placed |
| src/assets/ | Stores static assets like images, fonts, global CSS, which are processed by Vite (supports imports) |
| src/components/ | Stores reusable general components (such as buttons, cards, layout components) |
| src/composables/ | Stores reusable Composition API logic functions (recommended code reuse method in Vue 3) |
| src/router/ | Vue Router configuration directory, usually contains index.js defining the route table |
| src/stores/ | Pinia state management directory (officially recommended for Vue 3), stores each store module |
| src/utils/ | Stores utility functions, such as axios encapsulation, time formatting, constants, etc. |
| src/views/ | Stores page-level components, usually corresponding one-to-one with routes (route pages) |
| src/App.vue | Root component of the Vue application, contains entry rendering points like `` |
| src/main.js | Project entry file, creates the Vue application instance, mounts plugins (router, pinia, etc.), and mounts to #app |
| index.html | HTML template file, contains the `
` mounting point |
| vite.config.js | Vite build tool configuration file, allows customization of plugins, aliases, proxies, etc. |
| package.json | Project dependencies, script commands (such as dev, build, preview) |
| .gitignore | Git ignore file, usually ignores node_modules, dist, .env, etc. |
| .env / .env.production | Environment variable files, used for configuring API addresses in different environments (Vite variables start with VITE_) |
| README.md | Project description document |
As the project grows, you might also need to add these folders:
* **src/layouts/**: Different page layouts (e.g., AdminLayout.vue, GuestLayout.vue).
* **src/plugins/**: Custom Vue plugins (e.g., automatic registration of global components).
* **src/directives/**: Custom directives (e.g., v-loading).
* **src/types/**: Global TypeScript type declarations.
* **tests/** or **__tests__/**: Unit/E2E tests (Vitest + Vue Test Utils).
* **src/api/**: Separated API call modules (more granular than utils/request).
Next, we will take -vue3-test2 as an example, open the src/APP.vue file in the directory, and the code is as follows (explanations are in the comments):
## src/APP.vue File Code
/* Import the HelloWorld component from src/components/HelloWorld.vue */
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
Next, we can try to modify the initialized project by changing src/APP.vue to the following code:
## src/APP.vue File Code
import HelloWorld from './components/HelloWorld.vue'
export default{
name:'App',
components:{
HelloWorld
}
}
Open the page **http://localhost:3000/**. Generally, it will refresh automatically after modification, and the display effect is as follows:
!(#)
YouTip