Projet de blog Vue3
Ce chapitre vous guide de zéro dans la création d’un projet de blog Vue3 avec Vite, et vous aide à comprendre le rôle de chaque fichier du projet.
Préparation de l’environnement
Avant de commencer, assurez-vous que Node.js est installé sur votre ordinateur.
Node.js est un environnement d’exécution JavaScript qui nous permet d’exécuter du code JS en dehors du navigateur.
La chaîne d’outils de développement de Vue3 (Vite, npm) dépend de Node.js.
Vérifier si Node.js est installé
Ouvrez un terminal (utilisez CMD ou PowerShell sous Windows, Terminal sur Mac) et saisissez la commande suivante :
$ node -v v20.10.0
S’il affiche un numéro de version (v16 ou supérieure recommandée), il est installé.
Si ce n'est pas le cas, allez surnodejs.orgTéléchargez la version LTS et installez-la.
L’installation de Node.js inclut automatiquement npm (gestionnaire de paquets Node).
Commande de vérification :
npm -v
Créer un projet Vue3
Vue recommande officiellement d’utilisercreate-vuel’outil de scaffolding pour initialiser le projet.
Dans le terminal, rendez-vous dans le répertoire où vous souhaitez placer le projet et exécutez :
npm create vue@latest blog-app
Après l'exécution, une série d'options apparaîtra. Sélectionnez-les comme suit :
| Option | Tri par sélection | Description |
|---|---|---|
| Ajouter TypeScript ? | Non | Les débutants utilisent d'abord du JS pur |
| Ajouter la prise en charge de JSX ? | Non | La syntaxe de template est plus intuitive |
| Ajouter Vue Router ? | Oui | Le routage sera utilisé plus tard |
| Ajouter Pinia ? | Oui | La gestion d'état sera utilisée plus tard |
| Ajouter Vitest ? | Non | Pas besoin de tests pour l'instant |
| Ajouter ESLint ? | Non | Les débutants n'en ont pas besoin pour l'instant |
Après avoir fait les sélections, exécutez les commandes suivantes dans l'ordre indiqué :
$ cd blog-app $ npm install $ npm run dev
À ce stade, le navigateur ouvrira automatiquement http://localhost:5173. Si vous voyez la page d'accueil par défaut de Vue, le projet a démarré avec succès.
npm installIl téléchargera tous les paquets de dépendances dans le répertoire node_modules selon package.json. Cette étape nécessite une connexion Internet et peut prendre quelques minutes lors de la première exécution.
Explication détaillée de la structure des répertoires du projet
Ouvrez le dossier blog-app et vous verrez la structure suivante :
blog-app/ ├── index.html # 入口 HTML 文件 ├── package.json # 项目配置与依赖列表 ├── vite.config.js # Vite 构建工具配置 ├── public/ # 不经过编译的静态资源 ├── src/ │ ├── main.js # JS 入口，创建并挂载 Vue 应用 │ ├── App.vue # 根组件，所有页面的外壳 │ ├── assets/ # 需要编译的静态资源（CSS、图片） │ ├── components/ # 可复用的 Vue 组件 │ ├── views/ # 页面级组件（路由对应的页面） │ ├── router/ # 路由配置 │ └── stores/ # Pinia 状态管理
Rôle des fichiers principaux
index.html— Le fichier d'entrée consulté par le navigateur.
Vite injecte automatiquement src/main.js dans ce fichier ; vous n'avez pas besoin d'importer manuellement de JS.
src/main.js— Le fichier de démarrage de l'application Vue.
Il est chargé de créer l'instance d'application Vue, d'enregistrer les plugins (routeur, gestion d'état) et de monter l'application sur la page HTML.
src/App.vue— Le composant racine.
Il est le conteneur le plus externe de toutes les pages, contenant généralement une barre de navigation, un pied de page et une sortie de routeur.
Composants monofichiers (SFC)
Dans Vue, chaque.vuefichier est appelé un « Single File Component » (SFC).
Il encapsule ensemble le template, la logique et les styles d’un même composant ; un fichier est une unité fonctionnelle indépendante.
Structure en trois parties d’un SFC
Exemple
// Partie 3 : Logique — écrivez le JS ici
const message = 'Hello Vue3!'
</script>
<template>
<!-- Partie 1 : Template — écrivez le HTML ici -->
<h1>{{ message }}</h1>
</template>
<style scoped>
/* Partie 2 : Styles — écrivez le CSS ici */
h1 {
color: #427DB8;
}
</style>
L’ordre de ces trois balises peut être arbitraire, mais la convention de l’industrie est :script → template → style。
| Bloc | Objectif | Compréhension en une phrase |
|---|---|---|
<script setup> | Écrivez la logique JS, définissez les données et les méthodes | Contrôle ce que fait le composant |
<template> | Écrire la structure HTML, lier les données | Contrôle l'apparence du composant |
<style scoped> | Écrire les styles CSS | Contrôle si le composant est beau |
scopedL'attribut `scoped` fait que les styles du composant actuel s'appliquent uniquement à lui-même et ne polluent pas les autres composants. C'est l'une des fonctionnalités principales des composants monofichiers de Vue.
Syntaxe de template vs JSX
Vue utilise par défautla syntaxe de templatepour construire des interfaces.
La syntaxe de template s'écrit en<template>HTML avec des directives spécifiques à Vue.
| Fonctionnalité | Syntaxe de template | JSX |
|---|---|---|
| Forme syntaxique | HTML + directives Vue | Écrire du code de type HTML en JavaScript |
| Coût d'apprentissage | Faible, proche du HTML natif | Nécessite de comprendre le mécanisme de compilation JSX |
| Flexibilité | Moyen, déclaratif | Élevé, peut être manipulé librement avec JS |
| Niveau de recommandation de Vue | Recommandé par défaut | Prise en charge facultative |
| Scénarios applicables | La plupart du développement de pages | Nécessite une logique complexe pour générer dynamiquement l'interface utilisateur |
Ce tutoriel utilise la syntaxe de template tout au long, car c'est la manière la plus naturelle et la plus adaptée aux débutants d'écrire du Vue.
Mise en pratique : Effacez le modèle et écrivez le squelette du blog
Maintenant, effacez le contenu App.vue généré par défaut et remplacez-le par le squelette de base de notre blog.
Exemple
// La logique sera ajoutée ici plus tard
</script>
<template>
<div id="app">
<!-- Barre de navigation supérieure -->
<header class="navbar">
<h1>Mon blog</h1>
<nav>
<a href="/">Accueil</a>
<a href="#">À propos</a>
</nav>
</header>
<!-- Zone de contenu principale -->
<main class="container">
<p>Le contenu du blog sera affiché ici</p>
</main>
<!-- Pied de page -->
<footer class="footer">
<p>© 2024 Mon blog. Propulsé par Vue3.</p>
</footer>
</div>
</template>
<style>
/* Réinitialisation globale */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
color: #333;
}
/* Barre de navigation */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 40px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.navbar h1 {
font-size: 24px;
color: #427DB8;
}
.navbar a {
margin-left: 20px;
text-decoration: none;
color: #333;
}
/* Zone de contenu principale */
.container {
max-width: 960px;
margin: 40px auto;
padding: 0 20px;
}
/* Pied de page */
.footer {
text-align: center;
padding: 20px;
color: #999;
border-top: 1px solid #eee;
}
</style>
Après l'enregistrement, le navigateur s'actualisera automatiquement, et vous verrez une structure de blog épurée : barre de navigation en haut + zone de contenu au milieu + pied de page en bas.
C'est le point de départ de tous les chapitres suivants.
Résumé du chapitre
Dans ce chapitre, vous avez accompli trois choses : créé un projet Vue3 avec Vite, compris la structure des répertoires et la structure en trois parties des SFC, et écrit le squelette HTML de base du blog.
À retenir : savoir qu'un.vuefichier se compose de trois parties : template / script / style, et comment faire tourner un projet Vue.