Description du projet Vue3

Un projet Vue 3 se compose de plusieurs fichiers et dossiers, chacun ayant son rôle spécifique.

Ce qui suit est une analyse de base du code du projet Vue 3 pour vous aider à comprendre la structure du projet et la fonction de chaque partie.

  • Un projet Vue 3 se compose de plusieurs fichiers et dossiers, et les fichiers principaux incluentindex.html、main.jsetApp.vue。

  • Les composants Vue sont les éléments de base d'une application, en utilisant des composants monofichiers (.vuefichier) pour définir.

  • Vue Router est utilisé pour la gestion des routes, et Vuex est utilisé pour la gestion de l'état.

Structure du projet

Un projet Vue 3 contient généralement les fichiers et dossiers suivants :

my-vue-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── index.html      # 应用的 HTML 模板
│   └── ...             # 其他静态资源（如图片、字体等）
├── src/                # 项目源代码
│   ├── assets/         # 静态资源（如图片、字体等）
│   ├── components/     # 可复用的 Vue 组件
│   ├── views/          # 页面级组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 项目入口文件
│   ├── router.js       # 路由配置
│   ├── store.js        # Vuex 状态管理配置
│   └── ...             # 其他配置和资源
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
└── README.md           # 项目说明文档

Analyse des fichiers principaux

public/index.html

public/index.htmlIl s'agit du fichier modèle HTML de l'application Vue.

Vue montera l'application sur<div id="app"></div>à l'intérieur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Application Vue</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

src/main.js

src/main.jsC'est le fichier d'entrée de l'application Vue.

src/main.jsIl est chargé de créer l’instance de l’application Vue et de monter le composant racine (généralement App.vue) sur le div#app dans index.html.

Exemple

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

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

src/App.vue

src/App.vueC’est le composant racine de l’application Vue.

src/App.vueIl contient généralement la mise en page principale et les vues de route de l’application.

Exemple

<template>
  <div id="app">
    <h1>Bonjour, Vue 3 !</h1>
    <router-view></router-view> <!-- Vue du routeur -->
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

src/components/

src/components/Le dossier contient des composants Vue réutilisables.

Exemple : HelloWorld.vue

<template>
  <div>
    <h2>Bonjour, le monde !</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>

<style scoped>
h2 {
  color: blue;
}
</style>

src/views/

src/views/Le dossier contient des composants de niveau page, généralement utilisés avec la configuration de routage.

Exemple : Home.vue

<template>
  <div>
    <h2>Page d'accueil</h2>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

src/router.js

src/router.jsIl s'agit du fichier de configuration de Vue Router, utilisé pour définir les routes.

Exemple

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

src/store.js

src/store.jsIl s'agit du fichier de configuration pour la gestion d'état Vuex (si Vuex est utilisé).

Exemple

import { createStore } from 'vuex';

export default createStore({
  state: {
    message: 'Hello, Vuex!',
  },
  mutations: {
    setMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
  actions: {
    updateMessage({ commit }, newMessage) {
      commit('setMessage', newMessage);
    },
  },
});

package.json

package.jsonIl s'agit du fichier de configuration du projet, contenant les métadonnées du projet, les dépendances et les scripts.

Exemple

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve", // Démarrer le serveur de développement
    "build": "vue-cli-service build", // Compiler le code de production
    "lint": "vue-cli-service lint"    // Formatage du code
  },
  "dependencies": {
    "vue": "^3.2.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  }
}

Structure de base des composants Vue

Les composants Vue sont les briques fondamentales d'une application Vue.

Un composant contient généralement les parties suivantes :

1. Composants monofichiers (fichiers .vue)

A.vueLe fichier contient trois parties :<template>、<script>et<style>。

Exemple

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="updateMessage">Mettre à jour le message</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  methods: {
    updateMessage() {
this.message = 'Message updated!';
    },
  },
};
</script>

<style scoped>
h2 {
  color: green;
}
</style>

2. Template (<template>）

  • Définit l'interface utilisateur du composant en utilisant la syntaxe de template HTML et Vue.

  • Prend en charge l'interpolation ({{ }}), les directives (telles quev-if、v-for) et la liaison d'événements (telle que@click）。

3. Script (<script>）

  • Définit la logique du composant, y compris les données, les méthodes, les hooks de cycle de vie, etc.

  • Utiliserexport defaultpour exporter les options du composant.

4. Style (<style>）

  • Définit les styles du composant.

  • Utilisationscopedl'attribut peut limiter les styles au composant actuel.

Processus d'exécution du projet Vue

  1. Démarrer le serveur de développement：

    • Exécuteznpm run serveouyarn servepour démarrer le serveur de développement.

    • Ouvrez le navigateur et visitezhttp://localhost:8080pour voir l'application.

  2. Compiler le code de production：

    • Exécuteznpm run buildouyarn buildpour générer du code de production optimisé.

  3. Formatage du code：

    • Exécuteznpm run lintouyarn lintpour formater le code.

Autres extensions