Structure des répertoires Vue3
Dans le chapitre précédent, nous avons utilisé npm pour installer le projet (Vue-cli et Vite). Nous avons ouvert le répertoire dans un IDE (Vscode, Atom, etc.), et la structure est la suivante :
Outil en ligne de commande vue-cli (example-vue3-test) :
Vite（example-vue3-test2）
Un projet Vue 3 standard peut généralement être divisé en trois couches :
- Répertoire racine du projet :Outils de build et configuration du projet
- Répertoire public :Ressources statiques qui ne sont pas concernées par le build
- Répertoire src :Presque tout le code métier se trouve ici ; le développement quotidien se fait essentiellement dans ce répertoire.
Structure typique d'un projet Vue :
vue-project/ ├── public/ # 静态资源，直接复制到构建输出目录 │ └── favicon.ico # 网站图标 ├── src/ │ ├── assets/ # 静态资源（如图片、字体、CSS） │ │ └── logo.png │ ├── components/ # 可复用的通用组件 │ │ └── CommonHeader.vue │ ├── composables/ # 可复用的 Composition API 逻辑（可选） │ │ └── useFetch.js │ ├── router/ # 路由配置 │ │ └── index.js │ ├── stores/ # Pinia 状态管理（或 store/ 用于 Vuex） │ │ └── index.js │ ├── utils/ # 工具函数（如请求封装、格式化） │ │ └── request.js │ ├── views/ # 页面级组件（对应路由页面） │ │ ├── HomeView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 入口文件（创建 Vue 应用） ├── index.html # HTML 入口模板 ├── vite.config.js # Vite 配置文件 ├── package.json # 项目依赖与脚本 ├── .gitignore # Git 忽略文件 ├── .env # 环境变量（开发） ├── .env.production # 环境变量（生产） └── README.md # 项目说明
Explication du répertoire
| Chemin | Description |
|---|---|
| public/ | Stocke les ressources statiques qui ne seront pas traitées par l'outil de build ; elles sont directement copiées dans le répertoire dist, couramment utilisées pour favicon, robots.txt, etc. |
| public/favicon.ico | Icône du site (favicon) |
| src/ | Répertoire principal du code source du projet ; tout le code de développement est placé ici |
| src/assets/ | Stocke des ressources statiques telles que des images, des polices et du CSS global ; elles seront traitées par Vite (prend en charge l'import) |
| src/components/ | Stocke des composants courants réutilisables (tels que des boutons, des cartes, des composants de mise en page) |
| src/composables/ | Stocke des fonctions logiques réutilisables de la Composition API (l'approche de réutilisation de code recommandée par Vue 3) |
| src/router/ | Répertoire de configuration de Vue Router, contient généralement index.js pour définir la table de routes |
| src/stores/ | Répertoire de gestion d'état Pinia (officiellement recommandé par Vue 3), contient chaque module de store |
| src/utils/ | Stocke des fonctions utilitaires, telles que des wrappers axios, le formatage de l'heure, des constantes, etc. |
| src/views/ | Stocke les composants au niveau page, correspondant généralement un à un aux routes (pages de route) |
| src/App.vue | Le composant racine de l'application Vue, contenant<router-view>et d'autres points de rendu d'entrée |
| src/main.js | Fichier d'entrée du projet, crée l'instance de l'application Vue, installe les plugins (router, pinia, etc.) et monte sur #app |
| index.html | Fichier de modèle HTML, contenant<div></div>point de montage |
| vite.config.js | Fichier de configuration de l'outil de build Vite ; permet de personnaliser les plugins, les alias, le proxy, etc. |
| package.json | Dépendances du projet, commandes de script (telles que dev, build, preview) |
| .gitignore | Fichier d'exclusion Git ; ignore généralement node_modules, dist, .env, etc. |
| .env / .env.production | Fichier de variables d'environnement, utilisé pour configurer les adresses d'API, etc. pour différents environnements (variables Vite commençant par VITE_) |
| README.md | Documentation du projet |
À mesure que le projet grandit, vous devrez peut-être aussi ajouter ces dossiers :
- src/layouts/: Différentes dispositions de page (telles que AdminLayout.vue, GuestLayout.vue).
- src/plugins/: Plugins Vue personnalisés (tels que l'enregistrement automatique des composants globaux).
- src/directives/: Directives personnalisées (telles que v-loading).
- src/types/: Déclarations de types TypeScript globales.
- tests/outests/: Tests unitaires/E2E (Vitest + Vue Test Utils).
- src/api/: Modules d'appel d'interface API séparés (plus granulaires que utils/request).
Ensuite, prenons example-vue3-test2 comme exemple, ouvrons le fichier src/APP.vue dans le répertoire, et le code est le suivant (les explications sont dans les commentaires) :
Code du fichier src/APP.vue
<!-- Modèle d'affichage -->
<template>
<img alt="Logo Vue" src="./assets/logo.png" />
<HelloWorld msg="Bonjour Vue 3.0 + Vite" />
</template>
<!-- Code Vue -->
<script>
/* Importer le composant HelloWorld depuis src/components/HelloWorld.vue */
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<template>
<img alt="Logo Vue" src="./assets/logo.png" />
<HelloWorld msg="Bonjour Vue 3.0 + Vite" />
</template>
<!-- Code Vue -->
<script>
/* Importer le composant HelloWorld depuis src/components/HelloWorld.vue */
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
Ensuite, nous pouvons essayer de modifier le projet initialisé et changer src/APP.vue pour le code suivant :
Code du fichier src/APP.vue
<template>
<img alt="Logo Vue" src="./assets/logo.png" />
<HelloWorld msg="Bienvenue dans le tutoriel d'exemple !" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<img alt="Logo Vue" src="./assets/logo.png" />
<HelloWorld msg="Bienvenue dans le tutoriel d'exemple !" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
Ouvrez la pagehttp://localhost:3000/, elle s'actualise généralement automatiquement après modification, et l'effet d'affichage est le suivant :
