1 : Introduction à la structure des répertoires
2 : Présentation du projet
construire le dossier et les sous-répertoires
Voici quelques configurations de webpack , qui sont principalement utilisées pour certains paramètres lors du packaging du projet. Je n’entrerai pas dans les détails ici, les fichiers et configurations concernés seront présentés en détail lors de leur utilisation ultérieure.
fichiers de configuration et sous-répertoires
Ce dossier contient certaines configurations pour le développement et l'exécution de l'ensemble du projet, telles que le port de démarrage du projet lorsque npm run dev est utilisé.
fichiers et sous-répertoires node_modules
Ce dossier contient tous les packages de dépendances de base de Node. Lorsque nous développerons et installerons d'autres plug-ins, ils seront également installés dans ce dossier.
fichiers et sous-répertoires src
Ce dossier est le dossier principal de l'ensemble du projet, et la plupart de notre code est complété ici. Regardons de plus près ce qu'il y a à l'intérieur :
dossier d'actifs
Il contient principalement quelques fichiers de ressources. Par exemple, des fichiers tels que js et css.
Les ressources contiennent des fichiers susceptibles de changer.
Les fichiers du répertoire des ressources seront fusionnés en un seul fichier, puis compressés. Il est principalement utilisé pour stocker des js, css, etc. au niveau de l'entreprise, tels que certains fichiers de style scss globaux, des fichiers js de classe d'outils globaux, etc.
Expansion : Le répertoire des ressources peut être divisé en différents sous-répertoires pour stocker les fichiers selon vos propres besoins. Par exemple, actifs/util/ peut être utilisé pour stocker l'outil js, actifs/api/ peut être utilisé pour stocker l'interface métier js, etc.
dossier des composants
On peut dire que c'est l'âme de Vue. Tous les fichiers de composants peuvent être placés ici.
Composants! Un projet Vue est assemblé à partir de composants.
dossier et sous-répertoires du routeur
Ce qui se trouve dans ce dossier est le routage de l'ensemble du projet vue. vue est un représentant des applications monopage. Voici les fichiers qui définissent les adresses de chaque composant.
L'utilisation de vue-router pour gérer le routage dans le projet est divisée en étapes suivantes :
Étape 1 : Installez vue-router dans le terminal
npm install -g vue-router
Étape 2 : Créez un dossier routeur dans le répertoire src, créez router.js dans ce dossier (il peut aussi être le même que main.js, créez directement router.js), et configurez la configuration correspondante dans le fichier router.js Informations
Étape 3 : Introduisez le routeur de l'instance de routage dans le fichier d'entrée main.js, puis enregistrez-le dans l'instance racine
dossier de vues
Le dossier d'affichage est utilisé pour stocker des "pages". Une vue peut avoir un ou plusieurs composants, et une vue est en fait destinée à être accessible via une URL de navigation. Ils sont généralement placés dans src/views.
fichier d'application
Ce fichier est le fichier d'entrée pour l'ensemble du projet, équivalent au div le plus externe qui enveloppe la page entière.
App.vue est notre composant racine (le composant .vue qui utilise des balises pour restituer l'intégralité du projet), et toutes les pages sont commutées sous App.vue. En fait, vous pouvez également comprendre que toutes les routes sont également des sous-composants d'App.vue. Nous marquons donc le routeur comme un sous-composant d'App.vue.
fichier main.js
Ce fichier est le js principal du projet. Diverses variables, js et plug-ins utilisés globalement sont introduits et définis ici.
dossiers et sous-répertoires statiques
Dans ce dossier se trouvent des fichiers de ressources statiques.
Ces quatre fichiers sont les fichiers fournis avec le projet.
En principe pas utilisé.
fichier d'index
C'est la page d'hébergement du projet.
fichier de paquet
Il s'agit du format json de tous les plug-ins utilisés dans l'ensemble du projet, comme le nom et le numéro de version du plug-in. Lorsque vous utilisez npm install dans le projet, le nœud installera automatiquement tous les plug-ins de ce fichier.
Voici quelques documents pour le projet.
dossier de distribution
Il apparaîtra après l'exécution de la commande npm run build packaging. Une fois l'ensemble du projet écrit, tous les fichiers packagés seront ici. Il vous suffit d'accéder au fichier d'index dans le dossier pour accéder à l'application.
Une dernière photo.
